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 (`2rem`)
`fade-down`	opacity + translateY from above
`fade-left`	opacity + translateX from the right
`fade-right`	opacity + translateX from the left

The 2rem offset is root-font-size relative — projects that override :root { font-size } per breakpoint keep visual proportion automatically. The lib rebuilds tweens on breakpoint changes, so stepped root sizes Just Work; a fluid clamp() on :root locks in at breakpoint entry.

Attributes

Attribute	Default	Notes
`aa-animate`	(required)	one of the variants above
`aa-intensity`	`1`	multiplier on the `2rem` translate 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

gsap, ScrollTrigger.

Live demo — directions

fade-up

fade-down

fade-left

fade-right

Live demo — intensity

aa-intensity scales the 2rem translate offset.

intensity 1

intensity 3

intensity 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.

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.

1s smoothing