Enabling/disabling groups of ScrollTriggers

[gmullinix]

I have a single page project that animates through several full-screen slides with a lot of content. I'm using ScrollTrigger for the animations and need to effectively enable multiple ST animations for the active slide, while disabling them for inactive slides. Is there a way to assign Scrolltriggers to a "group" or collection upon creation? So far I've been pushing the ST's into arrays and using forEach loops to enable/disable as needed. However the process to store the ScrollTrigger reference is different depending on how I create it.

 

Type 1 - assign an ID to a standalone ScrollTrigger tween or timeline, then use ST.getById to grab it and push it into an array.

Type 2 - create animation with batches, then access the batch variable and push the ST's it returns.

Type 3 - create Scrolltrigger tweens via forEach loop, then push each tween.scrollTrigger into an array.

 

This all works well enough but feels kind of clunky and tedious. Wondering if I'm missing something.

See the Pen vEYdopB by gem0303 (@gem0303) on CodePen.

[Rodrigo]

Hi,

 

I don't think there is anything clunky or wrong about this approach, getting your ScrollTrigger instances in an array in order to use a reference to them is a good approach. Personally I would use an object for each array in order to keep a more ordered collection/grouping of each section:

const stCollections = {
  "titles": [],
  "batch": [],
  "other": [],
};

Like that getting the reference to them is easier.

 

Also this is a bit wasteful:

let h1Tween = gsap.to("h1", {
  scrollTrigger: {
    trigger: "h1",
    start: "top 80%",
    id: "h1-ST"
  },
  opacity: 1
});
STArray.push(ScrollTrigger.getById("h1-ST"));

A Tween/Timeline contains a reference to the ScrollTrigger instance that is attached to, so you can do this and not call the getById method:

let h1Tween = gsap.to("h1", {
  scrollTrigger: {
    trigger: "h1",
    start: "top 80%",
    id: "h1-ST"
  },
  opacity: 1
});
STArray.push(h1Tween.scrollTrigger);

Also you can do this as well:

let batchArray = ScrollTrigger.batch(".box-line div", {
    onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, rotation: 0, stagger:0.1}),
    once: true,
    start: "top 80%"
});

STArray.push(...batchArray);

Saves the forEach loop there.

 

Those tips probably will save a few CPU cycles, it most likely won't be noticeable but we're optimization freaks around here 😂

 

Hopefully this helps

Happy Tweening!

[gmullinix]

Hi Rodrigo,

 

Glad to know I'm on the right track. Your optimization suggestions were a big help in making the code feel more concise; thank you!

 

I have a second question related to this project. In certain circumstances I'm forcing the ScrollTrigger animations to play by looping through the ST array and calling ST.animation.play(). However the ScrollTriggers created with batch don't have this property since the tween is created in the onEnter callback. Is there a way to force their onEnter callbacks to fire instead?

[Rodrigo]

Indeed those animations are created using a callback. What you can do is create a method that uses the callback parameters, something like this:

const myMethod = () => {
  // Create your GSAP instances here
};

ScrollTrigger.batch(".target", {
  onEnter: myMethod,
});

Then you can call the method used by the callback anywhere in your code.

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()#callback-parameters

 

Hopefully this clear things up

Happy Tweening!