Animation

A flexible animation library built on anime.js with configurable triggers.

Preview in browser

Install Library

Overview

A Trigger‑Driven Animation Library for Clutch. The Animation library leverages anime.js to bring your components to life. Define animations visually—set start and end styles, easing, delays, loops, and more, all through the UI.

Why Clutch Animation

Configurable Triggers

  • onLoad: auto‑play when the component mounts

  • inView: play when scrolled into view

  • onScroll & whileScrolling: tie animation to scroll position or direction

  • manual: control playback (play, pause, restart, resume) via actions in the panel

  • Animate any CSS properties through visual controls

  • Stagger child animations with numeric or time‑string values

  • Loop, alternate, reverse, and delay for complex sequences

  • Proven performance and flexibility

  • Access all anime.js easing functions through the UI

  • Clean integration with no extra wrappers

What's Included

Animate component with full UI controls:

  • Trigger Control: choose On Load, In View, On Scroll, While Scrolling, or Manual
  • Trigger sub‑controls: debug, repeat, amount, axis, direction, and target selector
  • Style controls: start/end styles, easing, duration, delay, stagger, loop, alternate, reverse

Author

Clutch

Version