Getting Started
Welcome to Motionix! This guide will help you integrate our Design GSAP templates into your projects quickly.
Step 1: Choose Your Template
Browse our collection and select the template that fits your needs. Each template includes a live demo and detailed description.
Step 2: Purchase or Download
If it's a paid template, complete the purchase via Razorpay. Free templates can be downloaded immediately.
Step 3: Extract Files
Unzip the downloaded file. You'll find HTML, CSS, and JavaScript files, along with a README.
Step 4: Add to Your Project
Copy the relevant code into your HTML, CSS, and JS files. Ensure Design GSAP is loaded if not already included.
Step 5: Customise
Adjust colours, timing, easing, and other parameters to match your brand and design.
Customisation Guide
Changing Colours
Most templates use CSS variables for colours. Look for :root in the CSS file and update the values.
Adjusting Animation Timing
In the JavaScript file, you'll find GSAP timelines. Modify the duration and delay parameters to speed up or slow down animations.
Adding New Elements
You can extend the template by adding your own HTML elements and corresponding GSAP animations.
Integration Examples
Here are some common use cases for our templates:
- Landing Pages: Use hero animations to capture attention.
- Portfolios: Add scroll‑triggered reveals for projects.
- E‑commerce: Create engaging product hover effects.
- Dashboards: Use loader animations to improve perceived performance.
Performance Tips
- Use
will-changeandtransformfor smooth GPU‑accelerated animations. - Minimise DOM manipulation during animations.
- Use GSAP's
ScrollTriggerefficiently to avoid performance bottlenecks.
Need More Help?
Check our FAQ or visit the Support page. You can also reach out to us directly.