Share Posted December 5, 2022 Hello, 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 More sharing options...
Solution Solution Share Posted December 5, 2022 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted December 12, 2022 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 More sharing options...
Share Posted December 12, 2022 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 More sharing options...
Share Posted December 12, 2022 Hi, 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now