1. Docs
2. Motion
3. Exit

Exit Animations 1.2.2

Animate elements out of view with fade and scale exit effects. Deutsch: Austritt

When to use

• Exit / dismiss animations before removing nodes from the DOM.
• Coordinate with component close events when using Web Components.

When not

• Do not ignore prefers-reduced-motion for decorative motion.
• Do not use attention loops on large content regions — prefer CSS tokens + short durations.

Fade Out

<div class="velin-animate-fade-out">Fades to transparent</div>
<div class="velin-animate-fade-out-up">Fades out moving up</div>
<div class="velin-animate-fade-out-down">Fades out moving down</div>

Scale Out

<div class="velin-animate-scale-out">Shrinks to nothing</div>

Fill Mode

Exit animations typically need .velin-fill-forwards so the element stays hidden after the animation completes:

<div class="velin-animate-fade-out velin-fill-forwards">
  Gone after animation
</div>

Attributes & runtime

For scroll-triggered variants, prefer velin-reveal / initMotion() — see Motion & attributes. CSS classes here remain valid without JS.