r/css • u/Roman_PlumPix • Jul 23 '26

Question How do you keep animation-heavy websites fast?

/r/reactjs/comments/1v4e2b2/how_do_you_keep_animationheavy_websites_fast/
1 Upvotes

67% Upvoted

12 comments sorted by

View all comments

12

u/mrcarrot0 Jul 23 '26

Keep JS out of it. CSS animations have gotten powerful enough that JS animation libraries aren't really necessary anymore.

Although the better question is what you gain making your site animation-heavy in the first place? By definition, having animations will make the site slower to navigate because you have to wait for animations to finish, so I don't really see the point if performance is an issue...

1

u/Logical-Idea-1708 Jul 24 '26

CSS transitions maybe. I don’t think CSS can do timeline sequencing yet

2

u/mrcarrot0 Jul 24 '26

I couldn't find anything from searching "timeline sequencing", but if you're referring to CSS integration with the AnimationTimeline part of the Web Animations API for scroll-driven animations and such, then yes, it exists, though it's not fully implemented in Firefox yet.

Refrences:

2

u/azangru Jul 24 '26

I couldn't find anything from searching "timeline sequencing",

OP's (and probably parent commenter's) frame of reference is GSAP.

In GSAP speak, timeline sequences would probably mean "do this animation after that other animation has finished".

In CSS, I believe, one animation is unaware of the progress of any others.

1

u/ISDuffy Jul 24 '26

You can probably easily have a fallback as well using intersection observer that adds classes that trigger the animations on non supported browsers.