Premium GSAP-powered animation templates for developers & designers.
Motionix is a StartKnowledge project built for front-end developers, creative agencies, freelancers, product teams and students who want beautiful, production-ready motion without spending days writing GSAP from scratch. Every template in the library has been hand-tuned for performance, accessibility and cross-browser stability — from the newest Chrome and Safari to older evergreen browsers. The library covers scroll-driven storytelling, micro-interactions, hover choreography, animated loaders, page transitions, SVG morphs, split-text reveals, parallax depth scenes and interactive UI feedback loops.
Our design philosophy is simple: real motion, no fluff. Each pack ships with clean semantic HTML, scoped CSS and lean JavaScript that you can paste into any project — static HTML, WordPress, Shopify, Next.js, Nuxt, SvelteKit or plain vanilla JS. No build step is required. ScrollTrigger, timeline sequencing, easing curves and stagger logic are already wired so you can focus on your design, not on debugging animation state.
Motionix is also a teaching resource. Every pack is commented, documented and linked to short explanations so you can learn why a particular easing or timeline delay works. Documentation lives at documentation.html, the changelog at changelog.html, and a step-by-step onboarding guide at how-it-works.html.
We believe in lifetime updates. When you buy a Motionix pack, you get every future revision and new variants added to that pack at no extra cost. Free demos are always available on the homepage; premium packs unlock the full source, commercial license, prioritised email support and a private update feed. Support runs through support@startknowledge.in, and business enquiries go to contact@startknowledge.in.
Live Demo
The Hover Button animation is the highest-converting micro-interaction on the web. It fires on `mouseenter`, stays active on `mouseleave` and gracefully reverses on `focusout` so keyboard users get the same feedback as mouse users. The Motionix version uses a GSAP timeline with `ease: "power2.out"` for the entrance and `ease: "power2.in"` for the exit — a subtle asymmetry that feels more natural than a symmetric transition.
The pack ships in four visual variants: fill sweep, magnetic cursor follow, icon slide and gradient shift. All four are built on a single 12-line JavaScript function and scoped CSS class, so you can drop them into any button element without touching your existing styles. Every variant respects `prefers-reduced-motion` and falls back to a colour change for users who have disabled animation.
Copy-paste workflow: paste the CSS in your stylesheet, paste the JS before `</body>`, add `data-motionix="hover"` to your button, done. Full steps on How It Works.
Live Demo
Scroll Text uses GSAP ScrollTrigger to reveal headings and paragraphs as the reader scrolls. The Motionix version splits your copy into words (or lines, or characters) using a lightweight utility, then staggers each element's `y`, `opacity` and `filter: blur()` values from 0.6 to 0 with a `power3.out` ease. The result reads like a professional agency site without any WebGL overhead.
Three preset rhythms ship in the pack — *editorial* (slower, line-based), *punchy* (word-based, tighter stagger) and *cinematic* (character-based, longest). Each preset is a single object so you can retune the entire site from one config block. The trigger uses `start: "top 85%"` by default, which fires just before the text enters the viewport so the reader never sees the animation start.
Pair this with the Scroll Animation Pack for parallax and pinning variants.
Live Demo
Card Hover adds depth-aware feedback to any card grid. The Motionix pack includes tilt-on-cursor (3D rotateX/rotateY based on pointer position), spotlight glow (a radial gradient that follows the cursor), and lift with soft shadow. Because all three are transform-only, they stay at 60 fps even on mobile.
Each variant is `pointer-events: none` on the overlay so links inside the card remain clickable. The tilt uses `gsap.quickTo()` to smoothly interpolate the rotate values, and the glow uses a CSS custom property `--mx` / `--my` updated on `pointermove` — this means the JS never touches the DOM after the initial setup, keeping repaints to a minimum.
See the documentation for theming variables.
Live Demo
The Motionix Loader pack covers the four most requested preloader patterns: horizontal progress bar, circular spinner with text swap, brand-mark reveal, and a full-screen curtain that lifts after `window.load`. Each is timed to feel fast — none of them artificially delay your content. If the page loads in under 400 ms, the loader auto-hides to avoid an awkward flash.
All loaders are built on a single GSAP timeline with a `duration` variable you can tune from the top of the file. A `data-motionix-loader` attribute on `<html>` prevents the famous FOUC (flash of unstyled content) by fading in the body once the timeline completes. There is also a `forceHideAfter` safety timer so a loader can never block a page permanently.
More details on How It Works and FAQ.
The Button Animation Pack is the best-selling Motionix bundle. It contains 12 ready-to-use button animations: fill sweep, magnetic hover, icon slide, gradient shift, ripple click, loading spinner button, morph to checkmark, arrow reveal, underline draw, corner flip, glow pulse and text swap. Every animation is a self-contained CSS class plus a single JS function — no framework, no dependency beyond GSAP core.
Each button is keyboard-accessible, respects `prefers-reduced-motion`, and works inside forms (`<button>`), links (`<a>`) and inputs (`<input type="submit">`). The pack includes a full documentation PDF, a live demo page and a starter HTML file you can open in any browser to test every variant.
The Scroll Animation Pack is a ScrollTrigger tour-de-force. It ships 15 scroll-driven templates: parallax hero, layered depth scene, horizontal scroll gallery, pinned product story, progress indicator, text reveal, image mask reveal, sticky sidebar, counters, timeline scrub, step reveal, section snap, marquee, zoom-on-scroll and tilt-on-scroll.
Every template is written with performance in mind — ScrollTrigger's `markers: false` in production, `anticipatePin: 1`, batched `refresh()` calls, and no `scroll` event listeners. The pack also includes a `prefers-reduced-motion` fallback for each template so your site remains usable for users with motion sensitivity.
The Loader Animation Pack contains 8 polished preloaders: horizontal bar, circular spinner, brand mark reveal, curtain lift, ink splash, dot matrix, morphing shape and skeleton shimmer. Every loader is engineered to auto-hide on `window.load` and can never block the page beyond a hard 4-second safety cap.
The pack is built on a shared GSAP timeline utility so you can swap the visual style by changing one class name. Skeleton shimmer doubles as a content placeholder for async fetches, which makes it useful beyond the initial page load.
Browse the demo library and pick a pack that fits your project.
Start by looking at the demo grid above. Ask three questions: (1) What interaction am I trying to improve? (2) Where does it appear — hero, feature section, footer? (3) Who is the audience — a client, an end user, an internal stakeholder? The answers usually narrow 60+ options to 3–4. Motionix templates are labelled by *use case* not just by visual style, so you can search for "pricing card", "blog list", or "onboarding" and get an instant shortlist.
If you're not sure, always start with a free demo. Free demos include the full HTML/CSS/JS of one variant, so you can test performance on your actual machine before paying. Premium packs unlock the remaining variants, documentation, and commercial license. You can compare packs side-by-side on the documentation page, and questions go to FAQ.
Every pack is a single HTML, CSS and JS snippet you can paste.
Every Motionix pack follows the same file layout: `style.css`, `script.js`, `index.html` (the demo), `README.md` (setup guide), and `LICENSE.txt`. No minification, no obfuscation, no hidden dependencies beyond GSAP core and ScrollTrigger, both loaded from a public CDN. You paste the CSS into your stylesheet (or a `<style>` block), paste the JS before `</body>`, and copy the HTML structure into your page.
If you use a framework (Next.js, Nuxt, SvelteKit), you can either import the CSS/JS as modules or copy the vanilla version directly into a component. All templates are framework-agnostic on purpose — that is a Motionix design rule.
Drop it into HTML, WordPress, Shopify, Next.js or plain JS.
Static HTML: paste directly. WordPress: enqueue the CSS/JS through your child theme's `functions.php` or a snippet plugin. Shopify: add the CSS to `theme.css` and the JS to a `<script>` tag in `theme.liquid`. Next.js: create a `client` component, import the CSS and call the init function inside `useEffect`. Nuxt: same pattern, but with `onMounted`. SvelteKit: put the init call in `onMount`.
Because Motionix uses GSAP, ensure GSAP is loaded before your init function runs — the CDN `<script>` tags at the top of every demo show the correct order. Full step-by-step instructions are in how-it-works.html.
Ship, monitor and iterate. Lifetime updates included.
Once the code is live, keep an eye on three metrics: Lighthouse performance (should stay green), Cumulative Layout Shift (should stay under 0.1), and Interaction to Next Paint (should stay under 200 ms). Motionix templates are built to leave headroom in all three, but adding lots of third-party scripts can undo that. Use the changelog at changelog.html to see when a pack you own receives an update, and re-download from your account email.
If something breaks, email support@startknowledge.in with a link to the page and a short description. We aim to reply within two business days.
Payments on Motionix are processed by Razorpay (India) and Stripe (international). After purchase, you receive an email with a signed download link valid for 7 days. Downloads are single-user; the standard license covers unlimited personal and client projects, but not resale or redistribution of the raw files. Refunds are available within 7 days if the template does not work as described and we cannot fix it — see Terms & Conditions for details.
For invoices, GST details or enterprise licensing, email contact@startknowledge.in. For technical issues, email support@startknowledge.in. General feedback goes to hello@startknowledge.in.
The content on Motionix (https://motionix.startknowledge.in/) is provided for general informational and educational purposes only. It is published by StartKnowledge and is intended for developers, designers, agencies, students and hobbyists who work with web animation. While we try to keep every tutorial, template description and documentation page accurate and up to date, we make no representation or warranty of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability of the information, templates, code samples, images, or related graphics on this site for any purpose. Any reliance you place on such information is strictly at your own risk. To the maximum extent permitted by law, Motionix and StartKnowledge disclaim all liability for any loss or damage — direct, indirect, incidental, consequential or otherwise — arising out of or in connection with the use of this website or the templates sold on it.
Motionix does not provide legal, financial, tax, medical, or professional engineering advice. If you need advice in any of those areas, consult a qualified professional in your jurisdiction. Template code is provided as-is for creative and development use; it is not certified for safety-critical, medical, aerospace, defence, or life-support systems. Do not deploy Motionix templates in environments where animation failure could cause physical harm.
This website contains links to external websites that are not provided or maintained by Motionix. These include, but are not limited to, StartKnowledge, the StartKnowledge Blog, Ultra Static SEO Engine, YouTube Video Analyzer, Calculator Library, BN Ration Scale, Army Pension Calculator, AiMosaic Studio, Design Painting, and Universal Image Data Explorer Forge. We do not guarantee the accuracy, relevance, timeliness or completeness of any information on those third-party sites. Their inclusion does not imply endorsement, and their terms, privacy policies and practices may differ from ours. Always read the terms of any site you visit.
Motionix participates in affiliate programs. Some links on this site — including some links to tools, hosting providers, CDNs, design resources and paid services — are affiliate links. If you click one and make a purchase, Motionix may receive a small commission at no additional cost to you. This does not influence our editorial content, which is written independently and only recommends tools we use ourselves. Affiliate relationships are disclosed in-page, in this disclaimer, and in our Privacy Policy. If you have questions about a specific link, email contact@startknowledge.in.
This site may display advertising served by third-party ad networks. Those networks may use cookies, web beacons and similar technologies to show ads based on your prior visits to this and other websites. Motionix does not control the content of third-party ads and is not responsible for products or services advertised by them. You can manage ad personalisation through your browser and Google Ads settings. For full details, see our Cookies Policy and Privacy Policy.
Motionix publishes structured data (JSON-LD WebPage, WebSite, AboutPage and FAQPage schemas), an RSS feed at rss.xml, a sitemap, semantic HTML landmarks, descriptive alt text and clearly labelled navigation. We permit search engine crawlers and AI training crawlers that respect robots.txt to index our public pages. We do not use hidden text, cloaking, doorway pages or deceptive redirects. Where a page contains an expandable <details> element, the content inside is real, visible-on-click HTML — the same content is served to crawlers and to users. If you operate an AI system and need structured access, please use the JSON-LD blocks at the top of this file and the RSS feed.
This site is designed for clean indexing. Canonical URLs point to motionix.startknowledge.in. We use index, follow with max-image-preview:large, max-snippet:-1 and max-video-preview:-1. We do not use nofollow on internal links; we only use rel="noopener noreferrer" on external links that open in a new tab. We submit sitemaps and RSS feeds to Google Search Console and Bing Webmaster Tools. If you notice an indexing problem, please report it to support@startknowledge.in.
The Motionix website uses the following third-party services: Google Fonts (typography), cdnjs (GSAP delivery), Razorpay Checkout (payments in India), and Stripe (payments internationally). Each of these services has its own terms and privacy practices. Motionix does not store your card details — payment data is handled entirely by the payment processor. API calls made from your own projects to third-party services (for example, a CDN, a font API or an analytics endpoint) are governed by those services' terms, not by Motionix.
In no event shall Motionix, StartKnowledge, its directors, employees, partners, agents, suppliers or affiliates be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation loss of profits, data, use, goodwill or other intangible losses, resulting from (a) your access to or use of or inability to access or use the service; (b) any conduct or content of any third party on the service; (c) any content obtained from the service; or (d) unauthorised access, use or alteration of your transmissions or content, whether based on warranty, contract, tort (including negligence) or any other legal theory.
All Motionix templates, written content, images and code are © 2026 Motionix / StartKnowledge unless otherwise stated. You may not reproduce, redistribute, resell or republish the template files without a written commercial license. You may, however, use the templates in unlimited personal and client projects under the Standard License. For enterprise, white-label or resale licensing, email contact@startknowledge.in.
We may update this disclaimer from time to time. The latest version is always available at disclaimer.html. Continued use of the site after changes are posted constitutes acceptance of the revised disclaimer.
Questions about this disclaimer? Email contact@startknowledge.in, support@startknowledge.in, or hello@startknowledge.in. Postal enquiries can be routed through the StartKnowledge contact page at startknowledge.in.
Motionix is a static site. There is no server-side session, no login, and no database. Static-page protection therefore means: (a) integrity checks via Subresource Integrity (SRI) on CDN scripts, (b) Content Security Policy headers set at the host level, (c) HTTPS-only delivery, (d) HSTS preloading, (e) referrer policy set to strict-origin-when-cross-origin, and (f) no inline event handlers in production builds. If you self-host Motionix templates, replicate these headers in your own hosting panel or _headers / netlify.toml / vercel.json config. Security questions go to support@startknowledge.in.
Motionix is verified in Google Search Console under the property motionix.startknowledge.in. We submit an XML sitemap and the RSS feed at rss.xml. We monitor Core Web Vitals (LCP, INP, CLS), mobile usability and rich result eligibility for FAQPage and WebSite schemas. If you find a page that is not indexed correctly, please report it to support@startknowledge.in with the URL.
Motionix is machine-readable. Structured data is provided as JSON-LD for WebPage, WebSite, AboutPage, FAQPage and Organization. Feeds are available at rss.xml and via the sitemap referenced in robots.txt. All content inside <details> blocks is real, indexable HTML — not cloaked, not hidden, and not user-agent sniffed. AI systems are welcome to read the JSON-LD blocks at the top of this file for canonical structured information. Questions: support@startknowledge.in.
Some outbound links on Motionix are affiliate links. If you click one and make a purchase, Motionix may earn a small commission at no extra cost to you. This never changes the price you pay and never influences our editorial recommendations. Ad slots on the site may be served by third-party ad networks which may use cookies or similar technologies. Full details are in Disclaimer, Privacy Policy and Cookies Policy. To report a broken or misleading link, email contact@startknowledge.in.
Motionix uses the following third-party services: Google Fonts (typography), cdnjs (GSAP & ScrollTrigger delivery), Razorpay Checkout (India payments) and Stripe (international payments). Each service is governed by its own terms and privacy policy. Motionix does not store card data. API calls made by your own projects to any third-party endpoint are governed by that provider's terms, not by Motionix. For enterprise integrations or custom API questions, email contact@startknowledge.in.
In no event shall Motionix, StartKnowledge, its directors, employees, partners, agents, suppliers or affiliates be liable for any indirect, incidental, special, consequential or punitive damages — including without limitation loss of profits, data, use, goodwill or other intangible losses — resulting from (a) your access to or use of or inability to access or use the service; (b) any conduct or content of any third party on the service; (c) any content obtained from the service; or (d) unauthorised access, use or alteration of your transmissions or content, whether based on warranty, contract, tort (including negligence) or any other legal theory. This clause does not exclude liability that cannot be excluded by applicable law.
All Motionix templates, written content, images and code are © 2026 Motionix / StartKnowledge unless otherwise stated. You may not reproduce, redistribute, resell or republish the raw template files without a written commercial license. The Standard License covers unlimited personal and client projects. For enterprise, white-label or resale licensing, email contact@startknowledge.in. See also Terms & Conditions and Additional for full license terms.
For legal, DMCA, licensing or compliance enquiries, contact: contact@startknowledge.in. For technical support: support@startknowledge.in. For general feedback: hello@startknowledge.in. Postal and business enquiries can be routed through StartKnowledge.in.