Jump to content


Pin diferents sections

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.