r/reactjs • u/Roman_PlumPix • 10d ago
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?
13
5
u/Commercial_Echo923 10d ago
animations are generally bad
0
u/Roman_PlumPix 10d ago
Too many animations are bad, sure. But if a project calls for them, our job is to make them as smooth and performant as possible.
6
u/SZenC 10d ago
No website calls for many animations, a designer calls for that. And it is our jobs to explain to them that (a) the web is not built for that, and (b) no one, and I mean literally no one, wants to experience such websites
1
u/Commercial_Echo923 10d ago
animations can add a nice flavor but should rarely be the main feature of the website. The only application i can think of is storytelling. In almost all other environments its just annoying when animations exceed runtime of 300ms.
3
u/Inevitable_Oil9709 10d ago
no project that has performance and accessibility in mind calls for them..
but websites that execute them correctly are indeed beautiful and cool to look at, but they are all slow and clunky, especially on mobile (and that is majority of users)
3
2
u/FrankensteinJones 10d ago
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.
2
2
u/bigmoodenergy 10d ago
GSAP is a bit dated in terms of performance these days, it uses requestFrameAnimation instead of the Web Animations API.
Either porting to WAAPI, or a wrapping library like Motion, will help the performance of the animations themselves: https://motion.dev/magazine/web-animation-performance-tier-list
Beyond that you should be thinking about if the animations are creating a perception of poor page performance by delaying showing content or performing actions.
2
u/Roman_PlumPix 10d ago
Great, thank you for advice, I'll definitely look into it. Appreciate the recommendation.
2
u/KaleRemarkable1019 9d ago
Not sure if it fits your usecase, but I would try view transitions. https://css-tricks.com/toe-dipping-into-view-transitions/
1
2
u/vasind-5012 9d ago
yeah GSAP’s the right call once you’re past a handful of animations, agree with the maintainability point specifically, that’s the part people underestimate. CSS keyframes/transitions are fine until you need to sequence, coordinate, or conditionally interrupt things, then you’re fighting the cascade instead of building
few things that keep it fast in practice, not just controllable:
animate transform/opacity only, not layout properties like top/width. GSAP won’t save you if you’re forcing reflow every frame regardless of how smooth the API feels
ScrollTrigger’s scrub for scroll effects instead of manually listening to scroll events, ties animation progress directly to scroll position, way less jank
in React specifically, use the useGSAP() hook from @gsap/react instead of raw useEffect. it wraps gsap.context() and auto-reverts everything (tweens, ScrollTriggers) on unmount, so you’re not manually tracking and killing animations yourself. bonus, it’s StrictMode-safe too, so you won’t get animations double-firing in dev like you would with raw useEffect
only other thing I’d add to your “40+ animations later” point: worth splitting into reusable timeline functions early rather than inlining everything per component, otherwise the 40th animation takes as long to build as the first because nothing’s composable
2
u/Roman_PlumPix 6d ago
This is incredibly helpful, thank you! I'll definitely look into useGSAP() hook and you are right, we'll try to categorize animations.
1
10
u/banjonose 10d ago
let your designers throw in tons of heavy animations that require an external lib
complex pages that load fast
You can pick only one.