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
Section titled “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 (2rem × intensity) |
rotate-up-bl-ccw | every modifier composes — pick a corner, a direction, optionally up |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | one of the variants above |
aa-intensity | 1 | multiplier on the 5° angle (and on the 2rem 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
Section titled “Required GSAP plugins”gsap, ScrollTrigger.
Live demo — corners and directions
Section titled “Live demo — corners and directions”Live demo — with upward translate
Section titled “Live demo — with upward translate”rotate-up adds the same 2rem × intensity upward translate that fade-up uses. Combine it with corner and direction modifiers freely.
Live demo — intensity multiplier
Section titled “Live demo — intensity multiplier”aa-intensity scales the 5° angle (and the y-offset for rotate-up).
Live demo — stagger children
Section titled “Live demo — stagger children”Live demo — scrub-driven
Section titled “Live demo — scrub-driven”Pair rotate with aa-scrub to bind the tilt and opacity progress directly to scroll position. aa-scrub="true" snaps exactly to scroll; a number (e.g. "1") smooths with that many seconds of lag.
scrubbed rotate-up-bl