44 production-ready GSAP animation effects, each with a live demo and the full source. 8 are free to download. This page covers what a GSAP effect actually is, which plugin to reach for, and how to get one running on your own page.
All 76 premium effects and templates, plus every future effect and template we release. That's £0.51 per item.
Buy individually now: up to £10 comes off the Vault later
A GSAP effect is a self-contained piece of motion built with the GreenSock Animation Platform: a heading that decodes into place, a gallery that throws with momentum, a section that pins while its contents scrub past. GSAP is a JavaScript animation library that animates any property of any object, so an effect is really a small recipe combining a tween or timeline, a trigger, and the markup and CSS the motion depends on.
The distinction that matters in practice is between an effect and a demo. A demo shows that something is possible. An effect is the version you can drop into a real page: it cleans up after itself when the component unmounts, it has a defined behaviour at every breakpoint, it does something sensible when the user has reduced motion enabled, and it does not fight whatever smooth-scrolling library is already on the page. Most of the work in shipping animation is in that gap.
In April 2025, GSAP 3.13 made the full plugin set free, including the plugins that previously required a Club GreenSock membership. ScrollTrigger, SplitText, MorphSVG, Draggable, Flip and the rest are available without a paid membership, including for commercial projects under the GSAP Standard License. That changed what is worth building: the interesting question is no longer which plugins you can afford, but which patterns are worth the implementation time.
The effects below are organised by what they do rather than by which plugin they use, because that is how the problem usually arrives: you know you want the hero to reveal on scroll, not that you want ScrollTrigger with a scrubbed timeline. Each one includes a live demo, the full source, and notes on where it breaks.
8 of the 44 effects are free, MIT-licensed and mirrored on GitHub. Full source, no account needed.
GSAP's core handles tweens, timelines and easing on its own. The plugins below extend it, and since the GSAP 3.13 release in April 2025 every one is available without a paid membership. The count shows how many effects in this catalogue use each.
| Plugin | Used for | What it does | Effects |
|---|---|---|---|
| ScrollTrigger | Scroll-driven animation | Links any GSAP animation to scroll position. Handles pinning a section while its animation plays, scrubbing a timeline to scroll progress, and firing callbacks as elements enter or leave the viewport, without writing a single scroll listener. | 25 effects |
| SplitText | Typography | Splits a heading or paragraph into characters, words or lines and wraps each in its own element so they can be staggered independently. The original text stays in the DOM, so screen readers and crawlers still read it normally. | 2 effects |
| Flip | Layout transitions | Records an element's position and size, lets you change the DOM or CSS however you like, then animates smoothly from the old state to the new one. The way to animate filtering, reordering and grid-to-detail transitions without hand-computing offsets. | 2 effects |
| Draggable | Pointer interaction | Makes any element draggable with mouse, touch and pointer input, including bounds, snapping and axis locking. Pairs with InertiaPlugin for throw-and-settle motion. | 2 effects |
| InertiaPlugin | Momentum | Carries velocity from a drag or flick into a natural deceleration, optionally snapping to the nearest valid resting point. It is what makes a dragged carousel feel physical rather than abruptly stopped. | 2 effects |
| MorphSVG | SVG shape morphing | Tweens one SVG path into another even when the two paths have different point counts, handling the point matching for you. Used for blob backgrounds, icon transitions and organic mask reveals. | 1 effect |
| MotionPathPlugin | Path following | Animates an element along an arbitrary SVG path or set of coordinates, optionally rotating it to face the direction of travel. The basis for journey maps, orbit effects and anything that should follow a curve rather than a straight line. | 1 effect |
| Observer | Unified input | Normalises wheel, touch, pointer and scroll input behind one API with direction and velocity reported consistently. Useful when an interaction should respond to intent rather than to a specific device event. | 1 effect |
| PixiJS | WebGL rendering | Not a GSAP plugin but a WebGL renderer that GSAP animates the properties of. Reserved for effects that need per-pixel work, like displacement filters, which the DOM cannot do at frame rate. | 1 effect |
Each category page goes deeper on one kind of motion, with its own walkthrough and a comparison of every effect in it.
Scroll-driven animations that respond to the user as they navigate. Built with GSAP ScrollTrigger for pinning, scrubbing, and triggering at precise scroll positions.
Typography-focused animations that bring headings, paragraphs, and labels to life. Character-level splits, decode sequences, and distortion effects built with GSAP and SplitText.
Custom cursor animations that respond to mouse position, movement speed, and hover targets. Magnetic attraction, particle trails, and visual feedback patterns that make interfaces feel alive.
Mouse-driven animations that activate on hover, creating responsive feedback and visual intrigue. Morphing shapes, distortion effects, and smooth layout transitions powered by GSAP.
Visual-heavy animations that transform how images are displayed and interacted with. Scroll-driven sequences, draggable galleries, morphing layouts, and liquid transitions for portfolio and editorial sites.
Card-based animation patterns for grids, galleries, and interactive layouts. 3D perspective flips, elastic stacking, staggered reveals, and smooth layout transitions that make card interfaces feel dynamic.
Ambient, always-on animations that live behind your content. Canvas particle fields, morphing shapes, and parallax layers that add atmosphere and depth while headings and copy stay readable.
The first animation a visitor sees is the load itself. Preloaders that report real progress, overlays that clear with intent, and content that arrives in a considered order rather than all at once.
Every effect here follows the same four steps. Once you have done it once, adding the next one is mostly a matter of choosing the trigger.
Pull GSAP from a CDN or install it from npm. Each plugin is a separate file, so load only the ones the effect actually calls for rather than the whole bundle.
Call gsap.registerPlugin() once, before any animation code runs. Skipping this is the single most common reason an effect silently does nothing: the tween runs, but the plugin-specific properties are ignored.
Target a class or data attribute you control rather than a tag or nth-child position, so the effect survives a markup change. Set the start state in CSS, not only in JavaScript, so the element is not visible for a frame before the animation hides it.
Wrap the setup in gsap.context() and call revert() when the component unmounts or the route changes. Without this, ScrollTrigger instances accumulate on every navigation and the page slowly degrades.
gsap.registerPlugin(ScrollTrigger);
const ctx = gsap.context(() => {
gsap.from('[data-reveal]', {
y: 40,
opacity: 0,
duration: 0.8,
stagger: 0.1,
ease: 'power3.out',
scrollTrigger: {
trigger: '[data-reveal]',
start: 'top 80%',
},
});
});
// On unmount / route change:
ctx.revert();Transform and opacity are handled by the compositor and do not force the browser to recalculate layout. Animating width, height, top or left does, and it is the usual cause of an effect that looks fine on a desktop and stutters on a mid-range phone. When a layout change is genuinely what you want, use Flip rather than tweening the layout properties directly.
prefers-reduced-motion is a stated accessibility need, not a preference to route around. The fallback is not "no animation" but "the end state, immediately": text visible, images in place, nothing hidden. An effect whose reduced-motion path leaves content at opacity 0 has turned an animation into a blank page.
In any framework that swaps views without a full page load, animations and ScrollTriggers created on mount persist after the DOM they targeted is gone. gsap.context() exists to make this one call: create everything inside it, revert it on teardown. This is also what makes an effect safe to use twice on one page.
If JavaScript sets the hidden start state, the browser paints the visible version first and the element flashes before it animates. Put the start state in a stylesheet gated on a has-js class, and restore it under both no-JS and reduced motion so the content is never stranded invisible.
A GSAP effect is a reusable piece of motion built with the GreenSock Animation Platform, combining a tween or timeline, a trigger such as scroll or hover, and the markup and CSS it depends on. In practice the useful version also handles cleanup, breakpoints and reduced motion, which is what separates a production effect from a demo.
Yes. Since the GSAP 3.13 release in April 2025, the full GSAP plugin set has been free to use, including on commercial projects under the GSAP Standard License. Plugins that previously required a Club GreenSock membership, including SplitText, MorphSVG, Draggable and InertiaPlugin, are now available without a paid membership.
ScrollTrigger for anything tied to scroll position, SplitText for per-character or per-line text animation, Flip for layout and filtering transitions, Draggable with InertiaPlugin for throwable interfaces, MorphSVG for shape morphing and MotionPathPlugin for movement along a curve. Core GSAP alone covers hover, loading and timeline-sequenced animation without any plugin.
Not inherently. GSAP runs every animation off a single requestAnimationFrame tick rather than one per tween, which is more efficient than running many independent animations. Performance problems almost always come from what is being animated rather than from the library: animating layout properties, running effects offscreen, or leaking ScrollTrigger instances across route changes.
They can be, but it is not automatic. The two things that matter are honouring prefers-reduced-motion with a fallback that shows the finished state rather than nothing, and keeping content in the DOM so screen readers and crawlers still see it. SplitText preserves the original text for this reason. Every effect here ships with a reduced-motion path and is checked with scripting disabled.
Yes. GSAP is framework-agnostic and animates the DOM directly. In React the pattern is to create animations inside a useGSAP or useLayoutEffect hook wrapped in gsap.context(), then revert that context on cleanup, which handles both unmounting and Strict Mode double-invocation. The source for each effect is plain JavaScript, so the adaptation is mostly about where the setup and teardown calls go.
Yes. Both accept custom code, so an effect is a matter of loading GSAP, pasting the script, and matching the selectors to the classes your builder generates. Webflow ships GSAP on its own sites and WordPress accepts it through a code block or the theme footer. The usual friction is selector naming rather than anything GSAP-specific.
For a simple hover state, a fade, or anything a single transition expresses cleanly, CSS is lighter and needs no dependency. GSAP earns its place when you need sequencing across many elements, animation tied to scroll progress, physics and momentum, or precise control over timing and easing that keyframes make awkward. Several effects here are deliberately CSS-only for that reason.
44 effects at £5 each, or every effect and template in the Effects & Templates Vault for £39.
Your cart is empty
Browse Effects