1. Docs
2. Motion
3. Attention

Attention Animations 1.2.2

Draw the user's eye with looping or one-shot attention-grabbing animations. Deutsch: Aufmerksamkeit

When to use

• Short attention cues (pulse, shake, bounce) on controls or status indicators.
• Keep iterations low; prefer tokens from Motion tokens.

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.

Available Animations

<div class="velin-animate-bounce">Bounce</div>
<div class="velin-animate-pulse">Pulse (scale throb)</div>
<div class="velin-animate-shake">Shake (horizontal)</div>
<div class="velin-animate-wiggle">Wiggle (rotation)</div>
<div class="velin-animate-ping">Ping (ripple)</div>
<div class="velin-animate-spin">Spin (360° infinite)</div>
<div class="velin-animate-rubber-band">Rubber Band</div>
<div class="velin-animate-jello">Jello (skew wobble)</div>
<div class="velin-animate-heartbeat">Heartbeat</div>
<div class="velin-animate-swing">Swing (pendulum)</div>
<div class="velin-animate-tada">Tada (scale + rotate)</div>

Infinite Loops

By default, spin and ping loop infinitely. Others play once. Add .velin-iterate-infinite to loop any animation:

<div class="velin-animate-bounce velin-iterate-infinite">
  Bouncing forever
</div>

Attributes & runtime

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