Ditching 3.4MB Videos for 40KB of Animation Code

The problem was dumb simple. Export a 15-second screen recording for the landing page, and you're looking at 3.4 megabytes. That's huge on mobile. The video would letterbox, users on slower connections would wait forever, and worst part? If someone had prefers-reduced-motion enabled in their OS settings, the video just sat there doing nothing.

So what's the actual alternative? Instead of shipping a video file, write the same animation in GSAP. The developer ended up with 40 kilobytes of JavaScript that does the exact same visual work. That's not a marginal improvement—you're talking about a 98% reduction in file size. The animation runs smooth, loads instantly, and you can hook it up to respect motion preferences with a single conditional.

The real win here isn't just the bandwidth savings, though that matters on mobile. It's that animations become code. You can respond to user settings. You can pause, reverse, or trigger them based on scroll position or user interaction. A video file is dumb—it plays or it doesn't. GSAP gives you actual control.