Examples / Animation Motion · Springs

Animation

The animation library, live: 25 timing curves — the full easing catalog plus spring presets — each plotting its curve with a dot tracing it in real time on one shared motion clock. Click any card to focus it; play/pause and restart from the toolbar. Springs show real velocity-driven overshoot.

20 easings + 5 spring presets, side by side
Velocity-preserving springs (visible overshoot)
One global motion clock drives all 25
Interactive: click to focus, play/pause, restart

animation.vel vel

 #App
  V f=1 bg=bg0
    H px=md py=sm bg=bg1 a=center
      T "Motion — 25 timing curves" font=bold/lg
      Spacer
      Btn "Play / Pause" -> click => vel::ui::animGalleryToggle()
      Btn "Restart"      -> click => vel::ui::animGalleryRestart()
    AnimationGallery f=1