fede Posted October 18, 2021 Share Posted October 18, 2021 Hi, I am using scrollTrigger plugin on a lottie animation to create a landing page: http://www.federicoherrmann.it/tasc/ The user shoud scroll down the animation till the end, select a component of the tractor and view the related data sheet. - While the text is shown I don't want the animation to be scrollable: so I set overflow: hidden; when datasheet is open. -I want the animation to remain in the same position when I colose the data sheet, and be scrollable again: so I set overflow: auto; Everything is working fine... till I resize the browser window. -The scrollbar shows even if it should't -The animation jumps back to start, or it messes up if I try to resize the window while the datasheet is open. How can I avoid this behavior? I did a simple codepen demo to emulate the same problem: just scroll down the animation and click on the pupil of the gost to hide scrollbar, click again to show it back. Hope someone can help me out thank you Fede See the Pen wvqGYmy by FedMann (@FedMann) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 19, 2021 Share Posted October 19, 2021 Welcome to the forums @fede I couldn't even get your demo to scroll to begin with, so there is no animation. I noticed that you are using a lot of older GSAP syntax, and would recommend checking out our Migration Guide. And for working with Lottie, I would recommend checking out our Lottie helper function. https://greensock.com/docs/v3/HelperFunctions#lottie Perhaps you can fork this demo and show your issue since we know this one works. See the Pen QWdjEbx by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
fede Posted October 19, 2021 Author Share Posted October 19, 2021 Thank you @OSUblake for your reply, I fixed the codepen, and also modified the GSAP syntax as in the guide. Still using my lottie file because I need something to click on to toggle the overflow visibility. 21 hours ago, fede said: -The animation jumps back to start, or it messes up if I try to resize the window while the datasheet is open. Good news, this problem is solved, I think it was bound to someting altering the dimensions of the body, and consequently the amount of scrollable space. 21 hours ago, fede said: -The scrollbar shows even if it should't This problem is not yet been solved. If I try to scroll the animation till the end and click the pupil, overflow hides, but if I resize the browser window the scrollbar shows again. For my project I need the overflow to stay hidden Let me know if you have some clue Thank you!:) Fede Link to comment Share on other sites More sharing options...
OSUblake Posted October 19, 2021 Share Posted October 19, 2021 It looks like GSAP is setting the overflow when you resize, so you can just change it again onRefresh... See the Pen yLoJvER by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
fede Posted October 20, 2021 Author Share Posted October 20, 2021 Great! Problem solved, thank you @OSUblake ! Link to comment Share on other sites More sharing options...
fede Posted October 20, 2021 Author Share Posted October 20, 2021 Just noticed an unaspected behavior, when I resize browser window height. If I scroll the animation till the end and then reduce the window height, everything stays in place, but if I drag the window back to max height, the animation rewinds half way more or less. This happens also on this codepen: See the Pen QWdjEbx by GreenSock (@GreenSock) on CodePen Is there a way to keep the scroll position to the bottom even if the window is resized? Thank you Link to comment Share on other sites More sharing options...
Cassie Posted October 20, 2021 Share Posted October 20, 2021 That's pretty standard browser behaviour. if you've scrolled the entire 800px distance of an 800px high browser window and then resize the browser to 1200px height, you'll still only have scrolled 800px of that height - if you map an animation to that scroll distance the progress will be affected. You can hijack that, sure - but that's just JS logic, not GSAP specific.https://www.javascripttutorial.net/dom/css/get-and-set-scroll-position-of-an-element/#:~:text=To set or get the,is (0%2C 0) . 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