Jump to content


Pin fixed position element on scroll

Go to solution Solved by Cassie,

Recommended Posts

I'm using ScrollTrigger animations to animate a main object. It is fixed from the start but at the third section, when the horizontal scroll starts (orange section), it should stay inside the section and scroll horizontally as it's inside the first slide.  In few words I tried to pin the black element when the scroll reach the end of the orange section.

I tried to change position dynamically (from fixed to relative) but it makes it doesn't work at all. 

Anyone can help? 

Thank you in advance!

See the Pen oNyQMPg by scavaliere (@scavaliere) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there!

So you can't fix elements inside a container with transforms on, so that's a bit of a limitation here.

I'm not sure whether this is an option for you as it involves two elements, but you could have one absolute and one fixed and toggle between them? 

See the Pen ExRGmEw?editors=0011 by GreenSock (@GreenSock) on CodePen

If you need one element, maybe something like this?

See the Pen yLEGbEa?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Hello @Cassie
Thank you for your solutions, they work perfectly! It's exactly what I need :)
Only one thing: if I add a scale to the box on my production site, a strange thing happens: the absolute box appears even if it should be invisible until the end of the section. It doesn't happen on the leave back or enter back, only on enter the first time. 
Another consideration: if I refresh the page and I am in the middle of the website, it wrongly loads the element and make it visible as it seems the right scrolltrigger is not initialized.
Is there a way to avoid it?

Thank you in advance!

Link to comment
Share on other sites

If you're still struggling, please make sure you provide a very clear minimal demo that illustrates the problem and be as specific as you can about what isn't working the way you expect. We're happy to answer any GSAP-specific questions. 

Link to comment
Share on other sites



Cassie's second option seems to be the best one IMHO. If you add some scaling to the box and factor in the new size on the translate animation everything seems to work as expected:

See the Pen VwdOqVJ by GreenSock (@GreenSock) on CodePen


Happy Tweening!

  • Like 1
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.