On resize, scrollTrigger break

[Nacho90]

Hello, maybe you can help me. I have this animation where the square changes color when it enters a section. Some are pinned and some are not.

The problem is: when I change the size of the screen, the starts and ends are offset and the square starts to change color on either side.
How can i fix this?

See the Pen LYQqKBB by NachoYama90 (@NachoYama90) on CodePen

[SteveS]

Your code is extremely difficult to understand in the sense that it goes against convention. You are nesting ScrollTriggers, which is big mistake. Reconstruct your code such that there are no nested scrollTriggers and see if that fixes it.

[GreenSock]

Actually, I don't see any nested ScrollTriggers (at least in the typical sense we mean "nested" - in tweens that are inside of a timeline). 

 

I'm having a very difficult time understanding the problem you're describing, @Nacho90 - can you please simplify things and elaborate on exactly what the problem is? I don't know what "square starts to change color on either side" means. Either side of what?

 

Maybe instead of 5 sections, just try 2 or 3 and tell us specifically how to reproduce the problem. I didn't notice anything behaving strangely, but I'm sure I must be missing something. 

[Nacho90]

Thanks for replaying.

I would try to be clear this time. I have some sections pinned and I need that the square ( when entering each section ) change its color.

The problem is:
When I resized the screen, It seems to be lost the markers references and the square doesn't change its color when entering a new section. ( it makes it random )  

[GreenSock]

I'm not seeing any problems in that demo, sorry. I must be misunderstanding. Maybe it would help if you simplified it further and gave very specific steps to reproduce. I resized and it seemed fine.