Animation families | Fancy Animations Docs

📄️Scroll trigger

How scroll trigger animations work: presets, start and end windows, scroll smoothing and your own transitions, all set from the builder panel.

Use the Custom scroll trigger preset to expose an element's scroll progress as a CSS custom property and drive several properties with your own CSS.

Build a tall section whose content stays fixed on screen while the page scrolls past: the base of most advanced scroll recipes.

Play children one after another in one scroll range, give each a position to use in CSS, and measure how much a sticky card is covered by the next.

Map scroll position to a video's playback, so it plays forwards as the visitor scrolls down and rewinds on the way back up.

Entrance animations that play once when an element scrolls into view: duration, delay, trigger point, repeats, loop and per-device options.

Play one entrance animation on each child of a parent in turn, with a small delay between them, instead of animating every child by hand.

Split a heading into letters, words or lines and animate each piece in as it scrolls into view: animations, splitting and options.

Add a pure CSS hover effect to buttons, cards and icons, one per element, with no module to turn on and no script to load.

Make an element lean, drift or tilt in 3D as the pointer moves over it, easing back when it leaves. Desktop only.

Set a radial gradient that follows the pointer, with an optional dot, net, line or diamond pattern on top that can drift in a loop.

Change what the site-wide custom cursor shows over a specific element, with plain HTML attributes set from the builder.