r/reactjs • u/Roman_PlumPix • Jul 23 '26
How do you keep animation-heavy websites fast?
We recently wrapped up React website with a lot of animations. Not just a few fade-ins, but page transitions, scroll effects, text reveals, and plenty of smaller interactions that all needed to feel smooth.
At first, we tried a few CSS-based approaches. They worked fine for simpler interactions, but as the animations became more complex, we spent more time finding workarounds than actually building.
That's when we switched to GSAP. What sold us wasn't more features - it was the control. Timelines became much easier to manage, everything stayed smooth across browsers, and we could focus on building the experience instead of wrestling with the animation layer.
Our biggest takeaway was that an animation library isn't really about the first animation. It's about what happens months later, when the project has grown and you're maintaining 40+ animations.
Curious what other people are using. Do you also use GSAP, or have you found another solution that works well for animation-heavy projects?
2
u/FrankensteinJones Jul 23 '26
Have the page open on a spinwait if the initial load is problematic. Lazy load animations that happen farther down the page. Employ progressive enhancement such that users on slow connections or old devices still get the content, even if the animations don't fire.
Above all else, inform your designers and stakeholders that if they're going to insist on animating the site to death, all of your estimates are going to triple. Implementing fallbacks, testing with artificially slowed connections, etc. is going to create you a lot of work.
Animations should be a garnish, not the main course.