Using a scrollTrigger function as a callback inside of a scrollTrigger timeline

[DevMonkey]

Hi there! I am trying to create a scrolled roulette that gets triggered twice, once at the beginning of the main timeline and again later on the other half of the main timeline. I was not able to use several callbacks for the roulette function, so i just called the roulette outside of the main timeline, then the main timeline and somewhere in the half of it i use a callback to the roulette function. however, every time you scroll back and forth and trigger the callback, the function adds to the previous one(s) so you end up having roulettes all over the place. Also by calling the roulette in the callback, the headers come from the top instead of from the bottom.

I guess the callback is not the solution I was looking for to trigger the roulette in the middle of the main timeline? but i wasnt able to find another solution so far. If someone could point me in the right direction, I would be very thankful.

Also thanks in advance for having the patience to look into this, because it is my first gsap project and I still miss a lot of basic concepts, so I'd be more than happy if you just tell me what I could be missing to keep looking for my self and I'll post the solution as soon as I come up with it.

See the Pen oNoBaOd by willoid (@willoid) on CodePen

[Cassie]

Hello there, Welcome to the forums!

Now I'm not certain exactly what you're trying to achieve, and this advise may sound counterintuitive - but often, the best way to look at scrollTrigger is without scrollTrigger.

It's a good idea to start off by creating a timeline and try to get that working the way you want. Then once you've got that working - add scrollTrigger in. A lot of the time when people start off by thinking about scroll they create a lot of unnecessary timelines and loads of trigger points when they actually just need one timeline. This could be a start?

 

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

Maybe you're trying to overlap sections? If so you can use the position parameter -