Access the AI Animation Generator and premium effects
Upgrade your plan to keep generating animations and unlock premium effects.
Explore 100+ production-ready GSAP effects across 14 categories. Every animation includes a live demo, replay button, and copy-paste code.
Character-level control, kinetic type, and creative text reveals powered by SplitText, TextPlugin, and ScrambleText.
Viewport-triggered reveals, parallax layering, and scroll-linked timelines with ScrollTrigger and Observer.
Interactive card patterns with Flip layout transitions, 3D transforms, and smooth UI state changes.
Visual-forward effects for portfolios, product showcases, and hero sections.
Micro-interactions, magnetic effects, and drag-based interactions that make a site feel premium.
Vector-based animations using MorphSVG for shape transitions, DrawSVG for stroke reveals, and creative SVG techniques.
Progressive stroke animations using DrawSVG for signatures, diagrams, infographics, and creative path reveals.
Animate elements along SVG curves, orbits, and complex trajectories with MotionPathPlugin.
Gravity, velocity, collisions, and bouncy cartoon physics with Physics2D, CustomBounce, and CustomWiggle.
Navigation patterns for showcasing content collections with drag, momentum, and creative transitions.
Page load, preloader, and transition patterns for polished user experiences.
Number animations, odometers, and data visualization effects for dashboards and stats sections.
Ambient effects that elevate the overall page feel — gradients, particles, and cursor interactions.
The showstoppers — complex effects combining multiple GSAP plugins for jaw-dropping results.
The GreenSock Animation Platform (GSAP) is the industry-standard JavaScript animation library used by over 11 million websites, including brands like Google, NASA, Nike, and Spotify. This collection brings together 100 production-ready effects that push GSAP to its limits — from subtle scroll reveals to physics-driven particle systems and multi-plugin showcases.
Every effect on this page is interactive. Hit the play button on any card to replay the animation, view the source code with one click, or copy the snippet straight into your project. Whether you’re building a portfolio, a SaaS landing page, or an editorial experience, these effects will help your site stand out.
Animation isn’t decoration — it’s communication. Thoughtful motion design guides attention, builds trust, and turns passive visitors into engaged users. Here’s why GSAP is the tool of choice for developers who take animation seriously.
GSAP uses requestAnimationFrame, GPU-accelerated transforms, and a proprietary render pipeline that consistently outperforms CSS animations and other JS libraries in benchmarks.
ScrollTrigger, MorphSVG, DrawSVG, SplitText, Physics2D, Flip, Draggable — every plugin is now free. This collection demonstrates all of them with real-world use cases.
GSAP handles browser inconsistencies internally, so your animations look identical in Chrome, Safari, Firefox, and Edge. No vendor prefixes, no workarounds needed.
Sites with intentional animation see higher scroll depth, longer session times, and improved conversion rates. Animation creates the “premium feel” users associate with trusted brands.
Each plugin unlocks a different category of motion. Here are the key plugins featured across these 100 effects, along with what they do and where you’ll see them in action.
The most popular GSAP plugin. Triggers animations based on scroll position, supports scrubbing, pinning, and snap points. Used in our fade-up reveals, parallax layers, horizontal scroll, velocity effects, and scroll-driven storytelling.
MorphSVG transforms one SVG shape into another regardless of point count. DrawSVG animates the stroke of SVG paths — perfect for logo reveals, signatures, and line-drawing effects. Together they power our entire SVG category.
SplitText splits text nodes into characters, words, or lines for individual animation. ScrambleText cycles through random characters before resolving to final text. Combined, they create typewriter, stagger, decode, and encryption effects.
The Flip plugin records an element’s state, lets you make DOM changes, then animates smoothly from the old state to the new one. Used in our grid filter, card expansion, shared element transition, and springboard menu effects.
Physics2D applies realistic velocity and gravity to elements. CustomBounce creates natural bouncing eases. Together they drive confetti cannons, gravity drops, Newton’s cradle, popcorn loaders, and form input physics effects.
Draggable adds drag and throw interactions with inertia. MotionPathPlugin moves elements along SVG paths or coordinate arrays. Used for drag carousels, cube interactions, satellite orbits, rollercoaster stats, and DNA helix animations.
Use these effects thoughtfully. Great animation enhances the user experience — but only when used with restraint and purpose. Here are the principles behind every effect in this collection.
window.matchMedia('(prefers-reduced-motion: reduce)'). Users who opt out of motion have accessibility needs that should always be honored.
once: true for reveal animations so they don’t replay when scrolling back up. Use scrub for effects that should track scroll position continuously. Always test on mobile where scroll behavior differs.
gsap.context() for easy cleanup — it automatically reverts all animations created within its scope.
From ScrollTrigger and MorphSVG to Physics2D and Draggable — every GSAP plugin is represented with practical, real-world examples you can use today.
Every animation includes clean, minimal code you can copy directly into your project. Click the clipboard icon on any card and the snippet is on your clipboard.
All effects are performance-tested and responsive. Animations adapt gracefully to touch devices — hover effects degrade to tap, drag interactions work with touch.
These aren’t just demos — they’re production patterns. Here’s how real projects use effects from each category.
Use text staggers, gradient reveals, and parallax layers to create a strong first impression. Combine with ScrollTrigger for scroll-driven storytelling that keeps users engaged past the fold.
Image tilt, before/after sliders, and 3D card flips make product showcases interactive. Add-to-cart confetti and hover lifts create micro-interactions that build trust and delight.
Animated counters, progress rings, bar charts, and odometers bring statistics to life. ScrollTrigger-driven reveals ensure numbers animate into view right when the user sees them.
SVG morphing, line drawing, motion paths, and particle effects showcase creative skill. Horizontal scrolling galleries and masonry cascades present work in distinctive ways.
Skeleton loaders, page transitions, flip filters, and scroll-scrub demos help explain complex products. Animated onboarding flows reduce friction and improve activation rates.
Staggered reveals, velocity blur, layered zoom, and scroll path journeys transform long-form articles into immersive reading experiences that rival the best digital publications.
Our AI Animation Generator creates custom GSAP code from natural language descriptions. Describe the effect you want — “fade in cards from the left with a stagger and bounce” — and get production-ready code in seconds.
It supports every GSAP plugin, generates clean code with best practices built in, and even suggests ScrollTrigger configurations for scroll-driven effects.
Try the AI Generator// AI-generated GSAP animation
gsap.from(".card", {
opacity: 0, x: -60,
duration: 0.7, stagger: 0.15,
ease: "back.out(1.4)",
scrollTrigger: { trigger: ".cards-grid", start: "top 80%" }
});Adding any effect to your project takes just three steps.
Add GSAP core and the required plugins via CDN or npm. Each effect card shows which plugins it needs in the colored badges below the title.
Create the HTML elements that match the effect. Most effects target simple elements — a text container, an SVG, a card div. The structure is visible in each demo’s preview.
Click the clipboard icon on any effect card to copy the GSAP code. Paste it into your JavaScript file, adjust selectors to match your markup, and you’re done.
This collection represents the full power of the GSAP ecosystem — from simple scroll reveals to multi-plugin showcases that combine physics, morphing, and text manipulation into a single timeline. Every effect is production-tested, mobile-friendly, and ready to copy into your next project.
New effects are added regularly. Bookmark this page, explore the categories above, or jump straight to the AI Generator for custom effects tailored to your exact needs.
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches). For essential animations, reduce motion intensity rather than removing them entirely.Dive deeper into specific GSAP topics with our dedicated guides and tools.
Start building with any of the 100 effects above, or let AI create custom animations tailored to your project.