How to set scrolltrigger defaults

[blaci]

Hi,

 

I just started learning JS and Gsap and I have a problems with srolltriger.

 

I created a loop and everithing working fine only scrolltrigger not.

The problem is that animations (timelines) works always as if it weren't even a scrolltrigger

 

Thanks for the help!

 

If there are any other ideas I can learn from to simplify the code then thank you too

 

 

gsap.utils.toArray(".a-rainbow").forEach((container, i) => {

	const svgwhite = container.querySelectorAll("svg .w-svg-accent-white");
	const svggreen = container.querySelectorAll("svg .w-svg-accent-green");
   	const svgpink = container.querySelectorAll("svg .w-svg-accent-pink");
   	const svgblue = container.querySelectorAll("svg .w-svg-accent-blue");
   	const svgpurple = container.querySelectorAll("svg .w-svg-accent-purple");
          
   	var tldefaults = { 
            repeat: -1, 
            defaults: {
				duration: 2, 
				delay: 3,},
			scrollTrigger: {
				trigger: container,
				start: "top bottom",
				end: "bottom top",
				toggleActions: "play pause resume pause"}
            };
                                   
   	var tlwhite = gsap.timeline(tldefaults);
          	
		tlwhite.to(svgwhite, {fill: "#83e6c5"})
		tlwhite.to(svgwhite, {fill: "#fc17ce"})
		tlwhite.to(svgwhite, {fill: "#4816cd"})
		tlwhite.to(svgwhite, {fill: "#7517cd"})
		tlwhite.to(svgwhite, {fill: "#ffffff"});

	var tlgreen = gsap.timeline(tldefaults);
          	
		tlgreen.to(svggreen, {fill: "#fc17ce"})
		tlgreen.to(svggreen, {fill: "#4816cd"})
		tlgreen.to(svggreen, {fill: "#7517cd"})
		tlgreen.to(svggreen, {fill: "#ffffff"})
		tlgreen.to(svggreen, {fill: "#83e6c5"});
            
	var tlpink = gsap.timeline(tldefaults);
          	
		tlpink.to(svgpink, {fill: "#4816cd"})
		tlpink.to(svgpink, {fill: "#7517cd"})
		tlpink.to(svgpink, {fill: "#ffffff"})
		tlpink.to(svgpink, {fill: "#83e6c5"})
		tlpink.to(svgpink, {fill: "#fc17ce"});
            
	var tlblue = gsap.timeline(tldefaults);
          	
		tlblue.to(svgblue, {fill: "#7517cd"})
		tlblue.to(svgblue, {fill: "#ffffff"})
		tlblue.to(svgblue, {fill: "#83e6c5"})
		tlblue.to(svgblue, {fill: "#fc17ce"})
		tlblue.to(svgblue, {fill: "#4816cd"});
            
	var tlpurple = gsap.timeline(tldefaults);
          	
		tlpurple.to(svgpurple, {fill: "#ffffff"})
		tlpurple.to(svgpurple, {fill: "#83e6c5"})
		tlpurple.to(svgpurple, {fill: "#fc17ce"})
		tlpurple.to(svgpurple, {fill: "#4816cd"})
		tlpurple.to(svgpurple, {fill: "#7517cd"});
        
});

 

[GreenSock]

Welcome to the forums, @blaci. And thanks for being a Club GreenSock member! 🙌

 

Could you please provide a minimal demo, maybe in CodePen? It's pretty much impossible to troubleshoot by just looking at a small piece of your code without seeing it in context. The problem might be that you forgot to load ScrollTrigger or there might be some other error. Once we see a minimal demo, I'm sure we'll be able to offer better advice.