Effect categories

7 curated collections grouping 108 effects by type. Find the right animation pattern for your project.

GSAP Scroll Animations

Scroll-driven animations that respond to the user as they navigate. Built with GSAP ScrollTrigger for pinning, scrubbing, and triggering at precise scroll positions.

Browse scroll effects

Text Animations 21 effects

GSAP Text Effects

GSAP text effects for headings, statements and reading passages: oversized lettering that follows a curved path, spirals through depth or unfolds like paper, alongside split reveals, scramble, glitch, typewriters and hover distortion. Every one has a live demo and the full source.

Browse text animations

Hover & Cursor 40 effects

GSAP Hover and Cursor Effects

Pointer-driven animations that respond to hover, mouse position, movement speed and drag. Magnetic attraction, particle trails, morphing shapes, cards you can throw and smooth layout transitions, all powered by GSAP.

Browse hover & cursor

Image Animations 38 effects

GSAP Image Effects

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.

Browse image animations

Background Effects 12 effects

GSAP Background Animations

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.

Browse background effects

WebGL & Canvas 30 effects

GSAP WebGL & Canvas Effects

Effects that draw to a canvas instead of to the DOM. Shaders, particle systems, mesh distortion and soft-body physics; GSAP handles matchMedia, teardown and any played values, and the renderer reads them each frame.

Browse webgl & canvas

Loaders 2 effects

GSAP Loading Animations

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.

Browse loaders

Looking for something specific?

Browse all effects