Advanced named configurations
Data Attribute Preset Cheat Sheet
Preview reusable named sets, inspect every stored value, and copy the exact data-attribute pattern.
DATA
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.