Apply basic ScrollTrigger to multiple classes?

[Whitfield]

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?

[GreenSock]

Welcome to the community, @Whitfield! I think you'll like it around here.

 

You're making one of the most common ScrollTrigger mistakes that is explained here: 

 

 

It wouldn't make a lot of sense to have ONE tween instance that has MULTIPLE ScrollTriggers - see what I mean? The various triggers would all be fighting for control of that one tween. So all you need to do is a simple .forEach() loop and create a tween for each:

gsap.utils.toArray(".anim-A, .anim-B").forEach(el => {
  gsap.from(el, {
    scrollTrigger: el,
    ...
  });
});

Does that make sense or did I misunderstand your question?

[Whitfield]

Hey Jack, thanks for the response! And thanks for that link, I already caught one mistake that I was about to make in my plan.

 

Your code above is beyond my current understanding, but your description sounds possibly backwards from what I'm trying to do. I'm not trying to add multiple ST's to a single class, I'm trying to add ScrollTrigger: self to multiple classes en masse, instead of adding that to each class individually.

It's not that the latter is any big deal, it just seems inelegant — as with CSS, it doesn't make sense to duplicate the same instruction between multiple classes, it's better to say that "all of these classes have X, Y and Z attributes, but only this class has A and this other class has B." Does that make more sense?

 

Edit: The more I look at your code snippet, the more it does actually look like what I'm trying to do — it's applying ST to all of the classes listed in the top line, right? If so, what is 'el' in this context?

Edited April 13, 2021 by Whitfield

[GreenSock]

52 minutes ago, Whitfield said:

Edit: The more I look at your code snippet, the more it does actually look like what I'm trying to do — it's applying ST to all of the classes listed in the top line, right? If so, what is 'el' in this context?

Yep, all it is doing is selecting all the elements with the class .anim-A or .anim-B:

gsap.utils.toArray(".anim-A, .anim-B")

Which returns an Array. I could use document.querySelectorAll() instead, but that returns a NodeList which in some old browsers doesn't have a .forEach() method or some of the other convenient methods. 

 

Then, I'm looping through each of those elements and creating a .from() tween with the appropriate ScrollTrigger pointed at that element. "el" is just the current element that's in the forEach() loop. 

 

Make sense?

 

If you need some more help, just whip together a minimal demo and we'd be glad to offer advice. 

[Whitfield]

Awesome, thanks! Yes, that does make sense, though it isn't actually working in my setup (finally got this CodePen to work):

See the Pen NWdYZzW by whitfield_g (@whitfield_g) on CodePen

[GreenSock]

Wait...I'm confused. You've got gsap.from() tweens that don't actually tween anything, and you're attaching ScrollTriggers to those. Then you've got a bunch of loose tweens that run immediately.

 

Can you explain exactly what you'd like to accomplish in the simplest way possible? Maybe just with a couple of elements, just to get the concept down? 

[Whitfield]

Hmm... the gsap.from() comment here surprises me — the initial one (with all of the 'anim-opac-on-' classes) is there to initially set those classes to opacity: 0, I assumed I would need to do that in order to fade them up to opacity: 1 (ScrollTrigger doesn't have anything to do with that, but it does apply to gsap.to() actions for those classes below). 

 

But yeah, the "loose tweens that run immediately" is what I'm trying to rope in with the top-most ScrollTrigger argument (based on your code snippet). Applying ST to a bunch of classes at once is the overall goal here.

[Whitfield]

One thing I'll add here is that my structure is already DOA due to one of the concepts outlined in the 'mistakes' page that you linked to: "Using one ScrollTrigger or animation for multiple sections." That's exactly what I was setting myself up to do, but I understand why it won't work. I'm not yet sure how to set this page up the way I want (with the ability to apply classes that define animation "presets" and are initialized by ScrollTrigger), but that may obviate the above structure even if we're able to get ST to work there. 😕

[GreenSock]

Oh, I think I understand what you're going for here. There are a bunch of ways to do this. Here's one: 

See the Pen zYNWgpJ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I'm just defining all the animation stuff up front, and assigning it to the various class names to make it easy to edit in one place. Then I loop through and create the animations accordingly.

 

I could have written that out manually for each one to make it clearer but that'd require more code and would be less maintainable (in my opinion at least). 

 

Does this give you what you were looking for? 

[Whitfield]

It sure seems to, thanks! In fact, you appear to have solved for both of these issues — now the second copy of the circle/square elements in my test area is properly animating when it appears in the viewport, eliminating the problem that I raised in my last post. Thanks a bundle, Jack!

[GreenSock]

Happy to help, @Whitfield. 

 

Once you get the hang of how things work, I think you'll really enjoy using the tools and never want to go back to CSS animations