Copy-ready class API
Preset Class Cheat Sheet
Thirty-three working classes cover every effect family, timing variation, group, and control.
SET
Need advanced named sets?
The class cheat sheet is the shortest path for ordinary editor work. Open the separate data-attribute preset sheet when you need Full Customizer sets, exact values, or the downloadable extended preset pack.
Advanced reusable sets
hf-scale-up hf-parallax is a supported same-element stack. Use one reveal preset and one parallax preset per element. Modifiers affect reveal timing; parallax intensity stays with its preset or exact attribute.
Advanced set resolution order
Element-level attributes win over the named set, and the named set wins over the global HF Motion default:
element data-hf-* attribute → named set → global defaultParallax presets
scroll
| Set | direction | distance | speed |
|---|---|---|---|
| subtle Supporting depth | top | 80 | 0.55 |
| default General artwork | top | 160 | 0.85 |
| dramatic Hero/product moments | top | 300 | 1.1 |
| reverse Counter movement | top | 180 | -0.75 |
Fade presets
dramatic
| Set | direction | duration | distance | easing |
|---|---|---|---|---|
| soft Opacity-only | none | 600 | 0 | ease-out |
| quick Small UI and buttons | bottom | 500 | 28 | cubic-bezier(0.22, 1, 0.36, 1) |
| default General content | bottom | 800 | 40 | cubic-bezier(0.22, 1, 0.36, 1) |
| dramatic Hero/editorial | bottom | 1100 | 90 | cubic-bezier(0.16, 1, 0.3, 1) |
Blur presets
dramatic
| Set | direction | blur | duration | easing | distance |
|---|---|---|---|---|---|
| soft Gentle focus | none | 8 | 650 | ease-out | — |
| default Balanced image reveal | bottom | 12 | 800 | cubic-bezier(0.22, 1, 0.36, 1) | 24 |
| dramatic Cinematic focus | bottom | 24 | 1050 | cubic-bezier(0.16, 1, 0.3, 1) | 36 |
Scale presets
pop
| Set | scale | duration | origin | easing |
|---|---|---|---|---|
| subtle Small UI | 0.96 | 550 | center center | ease-out |
| default Cards and images | 0.92 | 700 | center center | cubic-bezier(0.22, 1, 0.36, 1) |
| pop Strong entrance | 0.78 | 800 | center center | cubic-bezier(0.16, 1, 0.3, 1) |
| settle Oversized zoom-out | 1.1 | 750 | center center | cubic-bezier(0.22, 1, 0.36, 1) |
Rotate presets
dramatic
| Set | rotate | duration | origin | easing | direction | distance |
|---|---|---|---|---|---|---|
| subtle Labels and cards | 4 | 650 | center center | ease-out | — | — |
| default Balanced tilt | 7 | 750 | center center | cubic-bezier(0.22, 1, 0.36, 1) | — | — |
| dramatic Editorial hinge | -12 | 950 | bottom left | cubic-bezier(0.16, 1, 0.3, 1) | — | — |
| hinge Bottom-right pivot | 10 | 900 | bottom right | cubic-bezier(0.16, 1, 0.3, 1) | bottom | 24 |
Override one value
<div
data-hf="parallax"
data-hf-set="dramatic"
data-hf-distance="420"
>
Uses the dramatic direction and speed, but travels 420px.
</div>Download the preset pack
Use the extended file as-is or edit it into your own project-specific motion vocabulary.