can't figure out why the trigger of scrolltriggers are the same (in a loop)

[flowen]

as the title says. 

 

Please have a look here for the code

 

So the text-animations are triggered at the same time as the markers suggest.

When I loop though, the target is updated when I log out the values (see console output).

 

Also playing around with the start, stop positions I get very strange results.

 

thanks for having a look!

See the Pen by s (@s) on CodePen

[GreenSock]

You set the start for all your ScrollTriggers to exactly the same value - start: 200

 

Have you read the docs or watched the video? I think those will really help you understand the basics. This might also be helpful: 

 

I assume that perhaps you meant to just use start: "top center" or something like that? 

 

Also, you're using some inefficient code: 

// inefficient (this is creating a new ScrollTrigger for every splitText instance, using the same starting place anyway, so it's better to just use one in a timeline)
splitTexts.forEach((s) => {
  gsap.to(s.chars, {
    duration: 1.2,
    opacity: 1,
    scrollTrigger: {
      trigger: section,
      start: 200,
      markers: true
    }
  });
});
  
// more efficient (one ScrollTrigger, one timeline that contains all the animations): 
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: section,
    start: "top center",
    end: "bottom top",
    markers: true
  }
});
splitTexts.forEach((s) => {
    tl.to(s.chars, {
      duration: 1.2,
      opacity: 1
   }, 0);
});

Oh, and there's no such thing as gsap.defaultEase. 

// BAD:
gsap.defaultEase = Power4.out;

// GOOD: 
gsap.defaults({ ease: "power4.out" });

I hope that helps.

[flowen]

ahh I really needed these videos. I was assuming the api was completely different, thinking I should create a scrolltrigger for each tween.

 

This really helps, thanks for pointing out the mistakes I made 💚

[flowen]

so i've been playing around with your code.

And I'm still confused how to optimise the scrolltrigger for multiple sections.

 

So I have multiple sections on my page and I want to use each section as a trigger for the elements in that section (right now the headings which I have split with splittingjs). 

Wouldn't I still need to create multiple scrollTrigger instances so I have a different trigger element (section) for the animations within that? I'm not quite sure I understand how to optimise this. 

In your code you refer to section as the trigger, which I suppose also means that you create multiple timelines in the loop that returns section (sections.foreach(section => ())). If you meant the whole array (sections), I tried that and it won't trigger anything. 

 

Something else I noticed is that animating all the characters that are split is bad for performance. So I choose to use CSS, with a class, instead.

Saw in the video I should probably use the onEnter hook, as I don't think I can use toggleClass to just fire it once, right?

 

[flowen]

just noticed that in the video, in the pinning example, also a scrollTrigger is created for each section (panel).

 

I'm confused. Should, or shouldn't I do this?

 

[flowen]

So I fixed here it by looping and creating multiple scrolltriggers. Just wondering if this is really bad for performance / how it could be optimised.

Especially because I plan to add more sophisticated timelines (animating the 3d model, etc) to each section while/when scrolling to it

[ZachSaucier]

4 hours ago, flowen said:

wondering if this is really bad for performance / how it could be optimised

Having multiple triggers is not an issue. ScrollTrigger is super fast at what it does. Using multiple ScrollTriggers (one per section) is definitely the easiest way to do this sort of thing. It's very common to do as well.