Complete Attribute Reference · HF Motion Documentation

Effect-specific attributes

Use effect-specific names when reveal and parallax share an element, so each module receives an unambiguous value:

<section
  class="hf-stagger-children"
  data-hf-stagger-interval="140"
  data-hf-trigger="viewport"
>
  <div
    class="hf-scale-up hf-parallax"
    data-hf-reveal-duration="900"
    data-hf-reveal-delay="120"
    data-hf-reveal-distance="64px"
    data-hf-reveal-easing="cubic-bezier(0.16, 1, 0.3, 1)"
    data-hf-reveal-threshold="0.2"
    data-hf-reveal-once="false"
    data-hf-parallax-speed="0.85"
    data-hf-parallax-direction="top"
    data-hf-parallax-distance="180"
    data-hf-disable="mobile"
  >Preview content</div>
</section>

Attribute	Type / range	Default
`data-hf-reveal-duration`	0–60000 ms	700
`data-hf-reveal-delay`	0–60000 ms	0
`data-hf-reveal-distance`	0–5000 numeric px or approved CSS length	40px
`data-hf-reveal-easing`	validated keyword, cubic-bezier, or steps	smooth ease-out
`data-hf-reveal-threshold`	0–1	0.15
`data-hf-reveal-once`	exact `true` or `false`	true
`data-hf-trigger`	`viewport` or `load`	viewport
`data-hf-parallax-speed`	-2–2	preset
`data-hf-parallax-direction`	vertical, horizontal, start, end, top, bottom, left, right	vertical
`data-hf-parallax-distance`	0–5000 px	120
`data-hf-stagger-interval`	0–10000 ms	100
`data-hf-disable`	token list; currently mobile	none

Precedence: default → preset or advanced set → modifier → generic value → effect-specific value. Invalid values fall back; enable debug: true for warnings.

Full Customizer and advanced attributes

The generic attributes below create bespoke Full Customizer effects and reusable sets. Prefer effect-specific names when modules share an element.

This maximally configured Rotate example shows every control that applies to that selected effect:

<div
  data-hf="rotate"
  data-hf-set="dramatic"
  data-hf-direction="bottom"
  data-hf-duration="1200"
  data-hf-delay="180"
  data-hf-distance="72"
  data-hf-easing="cubic-bezier(0.16, 1, 0.3, 1)"
  data-hf-once="false"
  data-hf-trigger="viewport"
  data-hf-origin="bottom left"
  data-hf-rotate="-16"
>
  Fully customized editorial card
</div>

Effect-specific controls: the Full Customizer changes the available controls with the selected effect. Blur adds data-hf-blur, Scale adds data-hf-scale, and Parallax uses data-hf-speed; those values are not combined into a Rotate effect.

Attribute	Applies To	Default	Accepted Values / Limits	Purpose
data-hf	All	-	fade, parallax, blur, scale, rotate	Selects the effect type.
data-hf-set	All	none	Any defined set name	Loads reusable settings for the selected effect.
data-hf-direction	All	fade: bottom; others: none; parallax: top	top/up, bottom/down, start, end, left, right, none	Sets reveal origin or parallax direction.
data-hf-duration	Reveal types	700	0-60000 ms	Transition duration.
data-hf-delay	Reveal types	0	0-60000 ms	Delay before the transition begins.
data-hf-distance	Reveal + parallax	reveal: 40; parallax: 120	0-5000 px	Reveal offset or parallax travel range.
data-hf-easing	Reveal types	cubic-bezier(0.22, 1, 0.36, 1)	Valid CSS easing	Transition timing function.
data-hf-once	Reveal types	true	true/false, 1/0, yes/no, on/off	Controls whether the reveal replays.
data-hf-trigger	Reveal types + reveal groups	viewport	viewport, load	Uses page-load timing for opening content or Intersection Observer for scroll reveals. Groups pass their trigger to eligible children.
data-hf-origin	Scale / rotate	center center	Valid CSS transform-origin	Controls pivot point.
data-hf-scale	Scale	0.92	0.01-3	Starting scale before settling to 1.
data-hf-blur	Blur	12	0-100 px	Starting blur radius.
data-hf-rotate	Rotate	6	-360 to 360 degrees	Starting rotation angle.
data-hf-speed	Parallax	1	-10 to 10	Multiplies parallax movement; negative reverses it.
data-hf-stagger	Parent group	0	0-10000 ms	Delay added between eligible reveal children.
data-hf-stagger-start	Parent group	0	0-60000 ms	Initial delay before the first reveal.

Direction Semantics

For reveal effects, direction describes where the element starts. bottom starts below and moves upward into place; top starts above and moves downward into place.
For parallax, direction controls the movement vector. top/up creates upward movement as scroll progress increases.
start and end respect the element’s LTR or RTL writing direction.
left and right are physical directions and do not change in RTL layouts.
none removes directional translation while keeping fade, blur, scale, or rotate behavior.