Best way to reset timeline created inside a loop

[akalex_x]

Let me start by saying I am pretty new to GSAP. So far it's been pretty easy to use, but I am also not 100% sure if this is the best way to go about things so any feedback is welcomed.

 

I plan to build a site that will have multiple of the same type of sections and I would like each one of them to have their own animation (same animation but triggered at their own time). To do this I created a timeline for each section and it works great (on desktop at least). However, this animation makes no sense in mobile. I would like to run some sort of check on resize ( or check width on scroll? ) and remove the parallax side of things.

I did figure out I could write some css to stop javascript from changing the position but would rather have javascript not perform the change in the first place.

As of now I just want to disable the parallax, but would be good to know what the best way of doing things for other scenarios like removing the animation as a whole for mobile, or having a completely different animation for mobile (have it be responsive as you scroll, not just trigger a different animation based on the initial width).

See the Pen QWOgBLz by alexkinejara (@alexkinejara) on CodePen

[elegantseagulls]

Have you looked at ScrollTrigger.matchMedia?

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

[akalex_x]

3 hours ago, elegantseagulls said:

Have you looked at ScrollTrigger.matchMedia?

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

I had not seen this! Thanks!

 

This is almost perfect, just one small tweak needed. I only added the parallax tween inside the matchMedia function so that the rest of the animations keep working no matter the size. However, I would like to change the trigger start for mobile / desktop. I read on another thread I could pass a function to start so I implemented that, it seems to be working on load but I cant figure out how to have it update when the browser is resized. Is there a way to do that inside the matchMedia?

I am guessing I could just copy all of my tweens into both desktop and mobile matchMedias and just change the trigger start there, but that seems like a bunch of repeated code for a tiny change.

I updated my codepen to reflect these changes if you want to take a look at how im handling it on load right now.

[GreenSock]

If I understand your question correctly, just pass in the function rather than the RESULT of the function: 

// OLD
start: startTrigger(),
  
// NEW
start: startTrigger,

 

[akalex_x]

Ahhh thats awesome! I didnt expect it to run the function every time. Thanks!