[ScrollTrigger Resizing Issue]

Hello @akapowl !

 

Thank you a lot for spending your time on it, this is the behavior I was trying to accieve!🥳

 

In my opinion this is the more logical reaction to window resize, the one I would aspect as a profane. At least in this senario, where we have one scroll-trigger across the whole page. I didn't immagine it woluld be necessary such a workaround😅

 

Anyway great, thank you again!

[ScrollTrigger Resizing Issue]

Hi,

I have this problem with resize too, am trying to apply this solution:

On 7/28/2020 at 1:09 AM, ZachSaucier said:

var pageST = ScrollTrigger.create({});

var progress = 0;
ScrollTrigger.addEventListener("refreshInit", function() {
  progress = pageST.scroll() / ScrollTrigger.maxScroll(window);
});
ScrollTrigger.addEventListener("refresh", function() {
  pageST.scroll(progress * ScrollTrigger.maxScroll(window));
});

I need the animation to stay at its very end even if window is resized. If I make the window taller it works, but if I make it shorter, the animation rewinds a bit. Somebody knows how to solve this?

 

This i s my demo:

See the Pen wvqGYmy by FedMann (@FedMann) on CodePen

 

Thank you in advance

[ScrollTriggered animation reloads when resizing browser window]

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

[ScrollTriggered animation reloads when resizing browser window]

Great! Problem solved, thank you @OSUblake !

[ScrollTriggered animation reloads when resizing browser window]

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

 

 

 

[ScrollTriggered animation reloads when resizing browser window]

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