slide
slide-up, slide-down, slide-left, slide-right translate the element into place from the corresponding direction. No opacity tween — the element is visible the whole time. Pair with overflow: hidden on a parent if you want a clipping reveal effect.
For an entrance that also fades, use fade-up/down/left/right.
Variants
Section titled “Variants”| Variant | Starts at |
|---|---|
slide-up | yPercent(100 × distance) |
slide-down | yPercent(-100 × distance) |
slide-left | xPercent(100 × distance) |
slide-right | xPercent(-100 × distance) |
The offset is a percentage of the element’s own size, so aa-distance="1" slides exactly one element-width/height — perfect for fully clipping reveals when the parent has overflow: hidden.
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | one of the variants above |
aa-distance | 1 | multiplier on the 100% (own-size) offset |
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.