fade

fade brings an element from invisible to visible. Add a direction suffix (fade-up, fade-down, fade-left, fade-right) to combine the opacity tween with a translate from that direction.

Variants

Variant	What it does
fade	opacity 0 → 1, no transform
fade-up	opacity + translateY from below (50px)
fade-down	opacity + translateY from above
fade-left	opacity + translateX from the right
fade-right	opacity + translateX from the left

Attributes

Attribute	Default	Notes
aa-animate	(required)	one of the variants above
aa-distance	1	multiplier on the 50px translate
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

gsap, ScrollTrigger.

Live demo — directions

aa-animate="fade-*"

fade-up

fade-down

fade-left

fade-right

Live demo — distance

aa-distance scales the 50px translate offset.

aa-animate="fade-up" ·aa-distance="1 → 6"

distance 1

distance 3

distance 6

Live demo — stagger children

Add aa-stagger to a wrapper to animate its direct children in sequence. Each child runs the same animation with the stagger value (in seconds) between starts.

aa-animate="fade-up" ·aa-stagger="0.1"

child 1

child 2

child 3

child 4

child 5

child 6

Live demo — scrub-driven

Add aa-scrub to bind animation progress to scroll position. The element starts hidden and reveals progressively as you scroll. Pass true for an instant lock, or a number of seconds for smoothing lag.

aa-animate="fade-up" ·aa-scrub="1" ·aa-distance="3"

1s smoothing