Hey folks,
Brand-new GSAP user here, my creative studio decided last week to switch to it over CSS animation. The animation needs for our first client project are pretty simple, and we're using a single long-form page as our guinea pig. As such, we're using ScrollTrigger to activate almost all animations (i.e., stuff happens when elements appear in viewport).
One thing that I'd like to do but have so far been unsuccessful at is assigning ScrollTrigger: self to multiple animation classes, instead of adding it to each individual class. So for example, I would like to be able to do something like this...
gsap.from(
".anim-A, .anim-B",
{scrollTrigger: self,});
gsap.to(
".anim-A",
{duration: 2, opacity: 1});
gsap.to(
".anim-B",
{duration: 1, opacity: 1});
...but that just doesn't work — the ScrollTrigger behavior isn't applied to .anim-A or .anim-B. I've also tried creating a class called '.onscroll' that has ScrollTrigger: self applied and adding that to the HTML elements, but no dice.
I feel like either A) the answer to this is simple and I just haven't found it, or B) that what I'm trying to do has to be executed with a more complex GSAP/ScrollTrigger setup?