Scrolltrigger Timing problems on smaller screens

[DK7]

Hi friends,

 

a new day a new problem to solve and i'm stuck and need a tip from you pros 🙏

 

In my codepen example there are 4 sections that are scrolled horizontally. Section 2 & 3 stay put for their animation.

 

If I now make the browser smaller or larger, the timings of the trigger points change and the aminations start too early.

 

In order to be able to see the whole thing correctly, you have to view the codepen in full screen. e.g. the list animation in section 3 runs fine in full screen, but when the codepen is in the normal small view, they start too early and don't run all the way to the next section.

 

What can I do here so that all triggers always start and end at the right time for every screen size?

 

Thank you for your help and have a nice weekend ✌️

 

 

 

 

 

See the Pen yLvvbXd by dkx (@dkx) on CodePen

[GreenSock]

Quote

What can I do here so that all triggers always start and end at the right time for every screen size?

I'm not sure what the "right time" is (I'm sure it's clear in your mind what it should look like, but I have no idea). We'd love to help with GSAP-related questions, but unfortunately we just don't have the resources to weed through 700 lines of JS/CSS/HTML and make it match a list of requirements.  

 

If you'd like some help, I'd recommend isolating things as much as possible with as few elements as you can. Maybe 2-3 sections with a couple of colored <div> elements that move in place of your lists. The key to troubleshooting effectively is isolate, isolate, isolate. Once you have the most basic concept, start slowly building it up from there until it brakes and then post back here with that minimal demo and a pointed question and we'll gladly take a peek. 

 

It sounds to me like maybe you just need to tweak your "start" and "end" values, but I could very well be wrong because it wasn't clear to me what you wanted.

 

By the way, if you've got scrub set to true (or a number), you cannot also have toggleActions. Logically it's one or the other. So your toggleActions are just getting ignored. They're not breaking anything - I just wanted to make sure you knew they were useless in that case.