Grow or settle into place
Scale
Create subtle card reveals, strong pop-ins, and oversized settle effects with configurable transform origins.
SCALE
Live demo
Scale reveal
Grows from 0.78 with a strong ease-out curve.
Scale revealdata-hf="scale" data-hf-set="pop"
Scale reveals fade while settling from a starting scale to 1. Values below 1 grow into place; values above 1 shrink into place.
<div class="hf-scale-in" data-hf-once="false">Replays on re-entry</div>Minimal
<div class="hf-scale-in">Content</div>Default behavior: starts at scale 0.92 and fades to full size over 700 ms.
Fully Customized Scale
<div
data-hf="scale"
data-hf-scale="0.78"
data-hf-origin="bottom center"
data-hf-duration="850"
data-hf-delay="100"
data-hf-easing="cubic-bezier(0.16, 1, 0.3, 1)"
>
Pop-in card
</div>Oversized Start
<div
data-hf="scale"
data-hf-scale="1.12"
data-hf-duration="700"
>
Shrinks into place
</div>Scale Controls
| Starting Scale | Character | Typical Use |
|---|---|---|
| 0.96-0.92 | Subtle | Cards, icons, standard UI |
| 0.90-0.82 | Noticeable | Product images and featured panels |
| 0.80-0.65 | Dramatic | Hero art; use carefully |
| 1.03-1.12 | Settling / zoom-out | Background art and editorial imagery |