Pin diferents sections

[Juan90]

Hello, I am new using the gsap library.

I would like to know why the following behavior occurs.
In my code I have a red square, with a fixed position, which should change color as it enters different sections.

What happens is that if I change the aspect of the window or move from front to back, all start and end are offset.

Can someone explain to me what is happening and how to fix it?

Thank you

See the Pen LYQqKBB?editors=1010 by NachoYama90 (@NachoYama90) on CodePen

[Cassie]

Hey there!

 

This looks like a bit of a convoluted approach to me. Let's start with something simpler and work up from there.

 

What about something like this? (I've only done a few sections, just to demonstrate)

See the Pen gOvEWOW?editors=0010 by GreenSock (@GreenSock) on CodePen

[Juan90]

Thank you Cassie, but I might have another problem with it...

I was trying to use the pin feature, and I had some animations in each section. Also, I created a serie of scrollstriggers to animate them. When doing that, I found that the pin sections are positioning absolute, and it loses it the references to the scroll that I need.

 

I looked for this issue, and I found the pinnedContainer. But I'm not sure. 

[GSAP Helper]

Why don't you go ahead and fork Cassie's minimal demo and show us what you mean? 

 

Once we see an isolated demo that clearly illustrates the issue, we'll do our best to jump in and help with your GSAP-specific questions.