Jump to content
Search Community

ScrollTriggered animation reloads when resizing browser window

fede test
Moderator Tag

Recommended Posts

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

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

 

  • Like 1
Link to comment
Share on other sites

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

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

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

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.
×
×
  • Create New...