The same
animation,
four ways

I wanted to see how much the library itself changes an animation, and what each one is actually like to use, so I built the same one four times. Each demo comes with the real source and my notes on all four.

css
native · 0 kB
gsap
3.13 · 27 kB gz
motion
11 · 3 kB gz
anime.js
4.0 · 12 kB gz
01LIVE →Bouncing
ball
easing · squash · timing
02LIVE →Spring
drag
springs · gestures · momentum
03LIVE →Particle
burst
emitters · gravity · stagger
04SOONPage
transition
enter · exit · shared element
05SOONSVG
line draw
stroke-dashoffset · stagger