kill all scroll triggers in the array + how to select multiple targets for the animation

[Romann]

Hello smart people,  i have two questions gsap and scrolltrigger related:

 

1.

 

How can i efficiently select variety of html tags to animate for example i am using utils.toArray to select multiple section tags on my page and with forEach loop i get a variable with stored node of html select element i can use for my animation, what if i want to have multiple twins and reference elements with in"box" variable ? 

 

tr.fromTo(box, { opacity: 0,y:-100 },{ opacity: 1,y:0 });

 

 

for example i want to select another tag that is inside box variable is this is the only option ?  (this would select any first section child element, but unfirtunatelly i may have some variations in the components so for one component first child element can be ARTICLE and for another it may be P tag so the problem in this method is that it is not specific)

 

tr.fromTo(box.children[0], { opacity: 0,y:-100 },{ opacity: 1,y:0 });

 

 

I was hoping there is more flexible option like something like this: (it does not work)

 

tr.fromTo(box+" .article", { opacity: 0,y:-100 },{ opacity: 1,y:0 });

 

Unfortunately it does not work

 

Question : What would be the most efficient way to select tags for animation when having multiple components on the page ? I want to have one scrolltrigger for the entire section but elements inside may be different section to section. How can i have one scroll trigger per component (section)  but select variety of child nodes to animate

 

 

2.

 

I have a single page app and i am running scrolltrigger only on one page, when i leave this page scrolltrigger should  be eleminated. 

 

By some reason whatever i do does not kill scrolltrigger.

 

But if i change the way i setup scrolltrigger to this:

 

 

gsap.utils.toArray(".black").forEach(box =>{

let tr = ScrollTrigger.create({

trigger: box,

start: "top top+=83px",

end:'bottom-=83px top',

// markers:true,

onEnter: () => navColorActivate(),

onLeave: () => navColorDeactivate(),

onEnterBack: () => navColorActivate(),

onLeaveBack: () => navColorDeactivate(),

})

 

triggers.push(tr)

 

})

 

It works perfectly. Why ? Why this code is eleminated and original code is not ? 

 

 

here is my original code for both questions:

 

1. let triggers = []
2.  

1. if (triggers.length) {
2. triggers.forEach(t =>t.kill());
3. triggers = []
4. }
5.  

1. //this code executed only when i am visiting project page

if (match.route.pageType ==="project") {

 

1. gsap.utils.toArray("#content section").forEach(box =>{
2.  
3. console.log(box.children)
4.  
5. var tr = gsap.timeline({
6. scrollTrigger: {
7. id:"triggerC",
8. trigger: box,
9. start: 'top center',
10. // markers: true,
11. toggleActions: "play none none reverse"
12. }
13. });
14.  
15. tr.fromTo(box, { opacity: 0,y:-100 },{ opacity: 1,y:0 });
16. triggers.push(tr)
17.  
18. })
19. }

[ZachSaucier]

Hey Romann. 

1. This is really just a JavaScript question. It's probably best to use .querySelector() or .querySelectorAll() on your box inside of the loop. I talk more about this in my article about animating efficiently.
2. I don't really understand what you're saying works vs doesn't work here. Maybe if you made a minimal demo it'd help? Or at least were more clear with what code is different to make it work.

[Romann]

7 hours ago, ZachSaucier said:

Hey Romann. 

1. This is really just a JavaScript question. It's probably best to use .querySelector() or .querySelectorAll() on your box inside of the loop. I talk more about this in my article about animating efficiently.
2. I don't really understand what you're saying works vs doesn't work here. Maybe if you made a minimal demo it'd help? Or at least were more clear with what code is different to make it work.

 

Thank you so much, 1 - makes sense, works for me just wanted to confirm, for the second question:

 

I am not able to kill scrolltrigger if use this code structure (asigning  scrolltrigger directly to the timeline)

gsap.utils.toArray("#content section").forEach(box =>{

 

var tr = gsap.timeline({

scrollTrigger: {

trigger: box,

start: 'top bottom',

end: 'top top',

scrub:1,

// markers: true,

}

});

 

tr.fromTo(box, { y:250 },{y:0});

 

triggers.push(tr)

 

})

 

 

If i am using ScrollTrigger.creat  - i am able to kill scroltrigger

 

gsap.utils.toArray("#content section").forEach(box =>{

let tr = ScrollTrigger.create({

trigger: box,

 

start: 'top bottom',

end: 'top top',

// markers:true,

onEnter: () => navColorActivate(),

onLeave: () => navColorDeactivate(),

onEnterBack: () => navColorActivate(),

onLeaveBack: () => navColorDeactivate(),

})

triggers.push(tr)

 

})

 

 

 

For both scenarios i am using this method:

 

triggers.forEach(t =>t.kill());

 

 

 

 

 

 

 

 

[ZachSaucier]

Ah, I see now. Thanks for the code. FYI if you press the <> button in the post editor bar you can add formatted code  

 

The issue is that in the first case you are adding timelines to the array. So when you call .kill() it kills the timeline but not the ScrollTrigger. The second code adds the ScrollTriggers so when you kill them it kills the ScrollTriggers.

 

In the first case if you want to kill both the timelines and the ScrollTriggers it's easy:

triggers.forEach(t => {
  t.scrollTrigger.kill();
  t.kill();
});