Fade

Fade is the most flexible reveal. It can be opacity-only or combine opacity with directional translation.

Replay behavior: data-hf-once="true" is the default, so a reveal runs once. Set data-hf-once="false" when it should replay every time it leaves and re-enters the viewport.

<div class="hf-fade-up" data-hf-once="false">Replays on re-entry</div>

Minimal

<div class="hf-fade-in">Content</div>

Default behavior: an opacity-only fade with no travel, animated over 700 ms.

Fully Customized Fade

<div
data-hf="fade"
data-hf-direction="bottom"
data-hf-duration="950"
data-hf-delay="150"
data-hf-distance="72"
data-hf-easing="cubic-bezier(0.16, 1, 0.3, 1)"
data-hf-once="false"
>
Custom fade reveal
</div>

Class or attributes? Preset classes package the most-used JavaScript settings. Remove the preset class and move to data-hf="fade" plus attributes when you need direct control over the values the class would otherwise supply.

Fade Directions

Value	Starting Position	Visual Result
bottom / down	Below final position	Moves upward while fading in
top / up	Above final position	Moves downward while fading in
start	Logical start side	Moves toward center; RTL-aware
end	Logical end side	Moves toward center; RTL-aware
left	Physical left	Moves right while fading in
right	Physical right	Moves left while fading in
none	Final position	Opacity-only fade

Fade reveal

Minimal

Fully Customized Fade

Fade Directions