rotate

rotate fades the element in from opacity 0 while tilting it from a 5° offset back to its natural rotation. Add a corner suffix (-tl, -tr, -bl, -br) to pivot from that corner, -ccw to flip the direction, and use rotate-up to combine the rotation with the same upward translate as fade-up.

The animation is built with gsap.from(), so any rotation, opacity, or transform you set in CSS becomes the destination — a card with a permanent rotate(8deg) will land back on 8deg, not 0.

Variants

Variant	What it does
`rotate`	rotates clockwise into place + opacity 0 → natural
`rotate-ccw`	rotates counter-clockwise into place
`rotate-tl` · `-tr` · `-bl` · `-br`	pivots from the named corner instead of center
`rotate-up`	combines rotation with `fade-up`’s translate (3rem × distance)
`rotate-up-bl-ccw`	every modifier composes — pick a corner, a direction, optionally up

Attributes

Attribute	Default	Notes
`aa-animate`	(required)	one of the variants above
`aa-distance`	`1`	multiplier on the 5° angle (and on the 3rem y-offset for `rotate-up`)
`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 — corners and directions

rotate

rotate-ccw

rotate-bl

rotate-br-ccw

rotate-tl

rotate-tr-ccw

Live demo — with upward translate

rotate-up adds the same 3rem × distance upward translate that fade-up uses. Combine it with corner and direction modifiers freely.

rotate-up

rotate-up-bl-ccw

Live demo — distance multiplier

aa-distance scales the 5° angle (and the y-offset for rotate-up).

distance 1 (5°)

distance 3 (15°)

distance 6 (30°)

Live demo — stagger children

child 1

child 2

child 3

child 4

child 5

child 6