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

Full Control Over Styles

• Animate any CSS properties through visual controls

• Stagger child animations with numeric or time‑string values

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

Built on anime.js

• 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