Animal.js Demo

1. Basic Transform & Opacity (WAAPI)

animal.animate('.box-1', { x: 200, rotate: 180, opacity: 0.5, duration: 1000 })

2. Spring Physics

animal.animate('.box-2', { x: 200, easing: { stiffness: 200, damping: 10 } })

3. Timeline Sequence

4. SVG Draw


5. In View Trigger (Staggered Scroll)

Scroll down slowly. Cards will appear as they enter the view.

1
2
3

(End of trigger section)

6. Scroll Linked Animation

This box rotates and moves based on scroll position of the page.

Rotate