@easemate/dom - Comprehensive Feature Demo

1. Basic Transform Animation

Play Pause Reset

x: 0, y: 0, rotate: 0

2. Scale & Opacity

Play Reverse

scale: 1, opacity: 1

3. Color Animation

Animate Colors

backgroundColor: #667eea

4. Keyframe Sequence

Play Sequence

Ready for keyframe animation

5. CSS Variables

Animate CSS Variables

--box-size: 50px, --box-radius: 8px

6. Filter Effects

Apply Filters Reset Filters

Filter

blur: 0, brightness: 1, saturate: 1

7. Multiple Elements (Stagger-like)

Animate All Reset

8. Incremental Values (+=, -=, *=)

+= 50px -= 50px *= 1.5 scale Reset

x: 0, scale: 1

9. Scroll Trigger (Reveal on Scroll)

Scroll down to see the reveal animation

Reveal

10. From/To Animation

Play From/To

Animates from off-screen

11. Relative Positioning (relativeConfig)

Move to parent edge Reset

Uses relativeConfig against parent

12. Transform Origin Per Frame

Play rotation with origins

transform-origin updates per frame

13. Driver Comparison (RAF vs WAAPI)

Move both boxes

RAF

WAAPI

Driver selection will appear here

Console Output