GSAP (ScrollTrigger) vs CSS scroll timelines

[DevVali]

Hi guys, as CSS quite recently added scroll animations (https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) built into Chromium based browsers (no Firefox support yet though), I was wondering, how do they compare and stand against GSAP ScrollTrigger and what would be the appropriate use cases for my website? I have been using GSAP for some time and so am a long-time GSAP user, but I wonder how should this new CSS feature impact my workflow?

 

Thanks in advance for any thoughts and opinions.

[mvaneijgen]

10 minutes ago, DevVali said:

no Firefox support yet though

I would start by saying that this is your first point for ScrollTrigger. 

 

ScrollTrigger has been here for years and doesn't go anywhere. Same as CSS transitions and animations are already some years old, but GSAP is still going strong. There just different tools we as developers can leverage to get to a state we are happy with. 

 

Same as we have electric drills now, that doesn't mean screwdrivers are obsolete. Pick the tool that is right for your setup, doesn't even mean you need to pick one, all my sites use GSAP, but that doesn't mean it doesn't use CSS transitions for simple hover effects where I don't need a full animation library. 

 

15 minutes ago, DevVali said:

but I wonder how should this new CSS feature impact my workflow?

Use it where you deem it appropriate. Hope it helps and happy tweening! 

[GreenSock]

From what I can tell, CSS scroll timeline only offers a TINY subset of what ScrollTrigger can do. Sorta like how CSS transitions or CSS animations only cover a very small subset of the rich feature set that GSAP offers. If you don't mind the poor browser support, perhaps they could be handy for some simple things(?) I'm obviously biased, but I just can't imagine why someone would reach for a CSS scroll timeline instead of GSAP/ScrollTrigger for any serious project. 

 

Long ago, I occasionally saw people try using CSS animations for things instead of GSAP mainly because they felt like it was "better" to use baked-in browser APIs whenever possible (fewer dependencies, smaller file size) when their project didn't require the "GSAP-only" features, but...

1. Often they ended up kicking themselves because when the client eventually requested something that only GSAP could offer (which is surprisingly common), they had to rewrite everything, porting it from CSS animations to GSAP. The more code they had written originally, the more painful it was to switch to the more capable/powerful GSAP toolset. They would have saved themselves a lot of time and effort by just using the more powerful tools to begin with because they'd accommodate pretty much any challenge the client threw at them.  
2. It's not uncommon for there to be bugs in a specific browser's implementation and it can be almost impossible to work around those whereas for a JS tool like GSAP/ScrollTrigger, it's much easier/faster to do so. 

Maybe I'm missing something, but I'm having a very difficult time seeing why a professional developer would would choose CSS scroll timelines over ScrollTrigger for a serious project that needs to work in modern browsers. 🤷‍♂️ The feature set and broad compatibility of ScrollTrigger dwarfs CSS scroll timelines. I'm open to being convinced otherwise. 🙂