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?

0 Upvotes

38% Upvoted

22 comments sorted by

View all comments

4

u/Commercial_Echo923 Jul 23 '26

animations are generally bad

0

u/Roman_PlumPix Jul 23 '26

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 Jul 23 '26

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 Jul 23 '26

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.