How to use
Attributes
Designer → select element → Settings → Custom attributes. Runs once, on first scroll into view.
data-anim
fade · fade-up · fade-left · fade-right · fade-scale · reveal · none
data-anim-mobile
Same values. Applies at 767px and below only.
data-anim-delay
Milliseconds before start, e.g. 150. Use it to stagger a row.
Click a chip to copy it.
The four
Presets
data-anim="fade"
fade
Opacity only. No movement.
data-anim="fade-up"
fade-up
Rises 2rem. Safe default, works at any width.
data-anim="fade-left"
fade-left
Enters from the left. Desktop only — pair with data-anim-mobile.
data-anim="fade-right"
fade-right
Enters from the right. Same caveat as the left.
data-anim="fade-scale"
fade-scale
Settles from 1.04 to 1. For images and cards.
data-anim="reveal"
reveal
Wipes up from the bottom edge. No fade. For images and headings.
Desktop and mobile
Per breakpoint
Both attributes on the same element. data-anim-mobile applies at 767px and below; data-anim everywhere else.
data-anim="fade-left" data-anim-mobile="fade-up"
from the left on desktop, from below on mobile
Use none to switch an animation off on one side only, for example data-anim-mobile="none".
Stagger
Delay
data-anim-delay="0"
0
data-anim-delay="150"
150
data-anim-delay="300"
300
Keep delays under 400ms.
