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 0.85 → 1 |
zoom-out | opacity 0 → 1 + scale 1.15 → 1 |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | zoom-in or zoom-out |
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 — stagger children
Section titled “Live demo — stagger children”staggered
zoom-in
grid
of
six
cards