HF MotionA humanfriend.digital product
One transform owner per layer

Motion Stacking

Combine parallax, reveals, and existing hover transforms safely by nesting dedicated motion layers.

Open playground
STACK
Outer layerParallax
Inner layerReveal
Component layerHover/layout transform
Live demo

Parallax + fade + hover

Each layer owns one transform: the outer wrapper handles parallax, the middle layer handles the reveal, and the card keeps its hover transform.

Three layers

Hover this card

Its hover transform remains independent of both HF Motion layers.

Outer: parallax · Middle: fade · Inner: hover transform Want to see that again? scroll up or down out of viewport and come back

Stacking is the correct way to combine effects that each use transform. Every layer owns one effect.

Fade + Parallax

Classes first

<div class="hf-parallax-fast">
  <div class="hf-fade-up">
    Content
  </div>
</div>

Exact data attributes

<div data-hf="parallax" data-hf-set="dramatic">
  <div data-hf="fade" data-hf-set="default">
    Content
  </div>
</div>

Parallax + Fade + Existing Hover Transform

<div data-hf="parallax" data-hf-set="default">
<div data-hf="fade" data-hf-set="quick">
<article class="hover-card">
Card content
</article>
</div>
</div>

Avoid This

<!– Do not put two effect names on one element –>
<div data-hf="fade parallax">...</div>

  • The library expects one recognized effect value in data-hf.

  • Combining effects on one element would create transform conflicts.

  • Nested layers remain predictable and easier to debug.