zoom
zoom-in and zoom-out combine an opacity fade with a scale tween. zoom-in starts smaller and grows; zoom-out starts larger and shrinks in.
Variants
Section titled “Variants”| Variant | What it does |
|---|---|
zoom-in | opacity 0 → 1 + scale 1 - 0.15 × intensity → 1 (default 0.85 → 1) |
zoom-out | opacity 0 → 1 + scale 1 + 0.15 × intensity → 1 (default 1.15 → 1) |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | zoom-in or zoom-out |
aa-intensity | 1 | Multiplier on the 0.15 scale delta from 1. 1 (default) = today's 0.85/1.15; 0.5 is subtler (0.925/1.075); 2 is stronger (0.7/1.3); 0 produces a pure fade with no scale motion. |
aa-duration | (init) | seconds — falls back to init({ duration }) (default 0.6) |
aa-delay | 0 | seconds |
aa-ease | (init) | any GSAP ease — falls back to init({ ease }) (default power4.out) |
aa-stagger | (off) | when set on a parent with children, staggers the children |
aa-scrub | (off) | true or seconds — bind progress to scroll |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger.
Live demo — directions
Section titled “Live demo — directions”zoom-in
zoom-out
Live demo — intensity (scrub-driven)
Section titled “Live demo — intensity (scrub-driven)”aa-intensity scales the delta between the from-state and 1. Default 1 reproduces 0.85/1.15; lower values produce a subtler entrance, higher values are dramatic. Scrubbed so you can hold a scroll position and see the three from-states side-by-side at the same progress point.
intensity 0.5
intensity 1
intensity 3
Live demo — stagger children
Section titled “Live demo — stagger children”staggered
zoom-in
grid
of
six
cards
Live demo — scrub-driven
Section titled “Live demo — scrub-driven”Pair zoom-* with aa-scrub to bind the scale and opacity progress directly to scroll position. aa-scrub="true" snaps to scroll exactly; a number (e.g. "1") smooths with that many seconds of lag.
scrubbed zoom-in
scrubbed zoom-out