Just launchedPattern Paste: copy-paste WordPress block patterns and theme styles

GSAP Vault

Premium GSAP animation effects library

71 production-ready animation effects built on GSAP, the industry-standard library used on 11M+ sites, plus 57 complete page templates. Drop an effect into your build, or take a whole design and ship it as it is.

11M+ GSAP Sites
Copy & Paste
A11y Focused
Stagger Grid Reveal effect
Open
Stagger Grid Reveal Effect
Hover Image Trail effect
Open
Hover Image Trail Effect
Cloth Drape effect
Open
Cloth Drape Effect
Scroll Velocity Skew effect
Open
Scroll Velocity Skew Effect
Isometric Scroll Wall effect
Open
Isometric Scroll Wall Effect
SVG Blob Morph effect
Open
SVG Blob Morph Effect
Sports Club Template template
Open
Sports Club Template Template
Financial Planner Template template
Open
Financial Planner Template Template
Link in Bio Template template
Open
Link in Bio Template Template
Observatory Template template
Open
Observatory Template Template
Coming Soon Template template
Open
Coming Soon Template Template
Recruitment Agency Template template
Open
Recruitment Agency Template Template
Elastic Photo Mesh effect
Open
Elastic Photo Mesh Effect
Page Preloader effect
Open
Page Preloader Effect
Typewriter Text effect
Open
Typewriter Text Effect
Isometric Scroll Wall effect
Open
Isometric Scroll Wall Effect
Holo Foil Card effect
Open
Holo Foil Card Effect
Cursor Trail Effect effect
Open
Cursor Trail Effect Effect
Layered Depth Template template
Open
Layered Depth Template Template
Coming Soon Template template
Open
Coming Soon Template Template
Architecture Studio Template template
Open
Architecture Studio Template Template
Coffee Roaster Template template
Open
Coffee Roaster Template Template
Financial Planner Template template
Open
Financial Planner Template Template
Holiday Let Template template
Open
Holiday Let Template Template
Count-Up Stats effect
Open
Count-Up Stats Effect
Velocity Slice Image effect
Open
Velocity Slice Image Effect
Parallax Hero effect
Open
Parallax Hero Effect
Scroll Timeline Chronicle effect
Open
Scroll Timeline Chronicle Effect
Cloth Drape effect
Open
Cloth Drape Effect
Scroll Colour Shift effect
Open
Scroll Colour Shift Effect
Theatre Venue Template template
Open
Theatre Venue Template Template
Editorial One Page Template template
Open
Editorial One Page Template Template
Food Truck Template template
Open
Food Truck Template Template
Branding Studio Template template
Open
Branding Studio Template Template
Observatory Template template
Open
Observatory Template Template
Art Gallery Template template
Open
Art Gallery Template Template
Split-Screen Hero Handoff effect
Open
Split-Screen Hero Handoff Effect
Particle Morph Text effect
Open
Particle Morph Text Effect
Interactive Halftone Image effect
Open
Interactive Halftone Image Effect
Chrono Rail Timeline effect
Open
Chrono Rail Timeline Effect
Link in Bio Template template
Open
Link in Bio Template Template
Cursor Confetti Trail effect
Open
Cursor Confetti Trail Effect
Isometric Wall Click tile to focus
View Effect
Scroll
Built for real projects

Take the source. Make it yours. Ship it.

No mystery package and no framework lock-in. Every download is editable, documented, and engineered to survive beyond the demo.

Source ownership No dependencies

Nothing hidden behind a package.

Clean HTML, CSS, and JavaScript you can move into React, Next.js, Vue, Svelte, Astro, or WordPress—and keep editing after you do.

script.js styles.css index.html
Clear handoff Human + agent readable

Documentation that tells you where to touch.

Each build explains its structure, controls, responsive behavior, and extension points. Use it yourself or hand the included setup prompt to your coding assistant.

See the setup workflow
CHANGE REQUEST 02 / 03

“Keep the composition. Slow the reveal, switch the trigger to click, and stack below 720px.”

Controls identified
Production behavior Performance first

The unglamorous details are already handled.

Viewport-gated work, safe teardown, compositor-friendly transforms, and a real reduced-motion path—not an afterthought added at launch.

60fps Targeted motion
A11Y Reduced-motion path
CLEAN Lifecycle teardown
Great motion makes websites memorable Drop in tune & ship.
Workflow

Three Steps to Ship

01

Browse

Explore our collection of production-ready effects and full-page templates. Filter by plugin, technique, or use case to find exactly what you need.

02

Copy

Each effect and template is self-contained with clean, documented code. Copy the HTML, CSS, and JavaScript directly into your project.

03

Ship

Customize colors, timing, and behavior. Test interactions in real time. Push to production and impress your users.

[01] Catalog Directory // 12 Plugins • 96 Techniques

Browse by Plugin or Technique

Find exactly what you need. Filter our entire library of effects and templates by official GSAP plugin, interaction model, or animation primitive.

INDEX: 12 PLUGINS // 96 TECHNIQUES
[01 // PLUGINS]

Official GSAP Plugins

12 PLUGINS
ScrollTrigger Official
Scroll & Viewport
Draggable Official
Touch & Interaction
Flip Official
Layout Transitions
InertiaPlugin Club GSAP
Momentum & Physics
SplitText Club GSAP
Kinetic Typography
DrawSVG Club GSAP
SVG Vector Motion
Observer Official
Scroll & Gestures
CustomEase Official
Cubic & Bezier Curves
MorphSVG Club GSAP
SVG Shape Morphing
MotionPathPlugin Official
Curved Motion Paths
PixiJS Third-party
2D WebGL Renderer
ScrollToPlugin Official
GSAP Tooling
[02 // TECHNIQUES]

Animation Techniques

[01]

Scroll & Viewport

15

Pinning, parallax, scrubs & viewport choreography

scroll-reveal 66 scrub 37 pinning 24 parallax 19 horizontal-scroll 5 scrollspy 3 scroll-storytelling 3 image-sequence 3 matchMedia 3 scroll-progress 3 viewport-aware-ticker 3 sticky-scroll-story 2 scroll-hijack 2 scroll-stack 2 scroll-linked-color 2
[02]

Text & Typography

8

Character splits, kinetic type & typographic counters

text-animation 33 count-up 15 marquee 4 typewriter 3 split-flap 2 typesetting 2 countdown 2 timed-stream 2
[03]

Interactivity & Gestures

17

Draggable physics, custom cursors & micro-interactions

hover-effect 32 click-toggle 28 draggable 21 velocity-reactive 19 micro-interaction 19 keyboard-navigation 15 momentum 13 pointer-effects 13 cursor-effects 9 mouse-follow 8 quickTo 6 touch-drag 5 magnetic 3 pointer-tracking 2 before-after 2 image-trail 2 value-transition 2
[04]

Layout & Transitions

18

Flip transitions, state changes, dialogs & bento flow

stagger 64 infinite-loop 11 flip-layout 10 progressive-enhancement 7 timeline-control 6 load-sequence 6 snap 5 tabs 4 elastic 4 wrap 4 page-transition 4 token-theming 4 carousel 3 ambient 3 organic-motion 3 lightbox 2 dialog-animation 2 grid-animation 2
[05]

3D, Canvas & Shaders

13

WebGL fragment shaders, 3D perspective & particle grids

3d-transforms 23 clip-path 13 canvas 12 physics 9 mask-reveal 8 filter 8 blend-mode 5 particle-system 3 webgl-shader 3 chromatic-aberration 3 gradient 2 particle-pooling 2 zoom 2
[06]

SVG & Vector Motion

8

DrawSVG strokes, MorphSVG shapes & vector filters

svg-animation 8 svg-line-draw 6 velocity 6 svg-filters 4 morphing 3 svg-draw 3 motion-path 2 progress-bar 2

Your Cart

Your cart is empty

Browse Effects