Motion Lab
GSAP, React, and too much free time. Eight animation experiments you can break.
SVG Morphing
Shape
Morphing
Six shapes. Fifty coordinates each. GSAP lerps between them every frame. That's the whole trick. The easing curve does most of the work making it look organic.
Techniques
What's Under the Hood
GSAP Timelines
Chain tweens, overlap them, scrub them. gsap.timeline() is the sequencer for everything here.
Scroll-Driven
ScrollTrigger pins, scrubs, and snaps sections based on scroll position. No scroll-jacking.
SVG Animation
MorphSVG interpolates path data between shapes. DrawSVG animates stroke-dashoffset. Both resolution-independent.
Micro-interactions
Hover scales, click springs, focus rings. Small tweens that give UI components tactile feedback.
Text Effects
SplitText breaks strings into chars/words, then GSAP staggers them. Scramble cycles random glyphs on hover.
3D Transforms
CSS perspective + rotateX/Y tracked to mouse position. No WebGL, just transform3d doing the heavy lifting.
By The Numbers
The Numbers
The only acceptable frame rate
Interactive demos on this page
Lighthouse performance score
Frame budget. Every tick counts
Text Reveal
Animations should do something.
If it moves and nobody notices why, cut it.
60fps or don't ship it.
That's basically the whole philosophy.
Keep going
8 Standalone Experiments
SVG path drawing, elastic springs, text scramble, 3D tilt, cursor trails. Each one is a self-contained component. Click around, break things.
See All ExperimentsThat's the tour
See how it's
all wired up
GSAP timelines, ScrollTrigger, React refs, Astro islands.
The about page breaks down the full stack.