How to restart a timeline based on scroll position

[Alex Goh]

Hi, I'm using GSAP with ScrollMagic; animates according to scroll position.

 

My site is a single page app where:

1. Page A: has GSAP animation integrated with ScrollMagic; when user scrolls vertically from 0px to 100px, an image will enlarge to 2x at 100px scroll position.
2. Page B: has no GSAP.

 

When user scrolls vertically to say 100px, the image enlarged to 2x, then user clicks to navigate from Page A to B , i have to kill all events listening to prevent unintentional firing of Page A's event, and that include stopping all GSAP timeline/tween (via ScrollMagic's Controller.destroy())

 

The issue is: When user goes back to Page A, I re-init the GSAP timeline/tween. The vertical scroll position on Page A is now at 0px, but the image is already at 2x. So when user scrolls to 100px, the image is enlarged 4x (2*2).

 

Hence, my question is how to reset GSAP timeline/tween to the point where scroll position is 0px and where image size should be 1x and not enlarged to 2x?

[ZachSaucier]

Hey Alex and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Shockingly Green membership!

 

We do not recommend ScrollMagic. ScrollTrigger is the official GSAP scroll plugin and it's better in every way!

 

10 hours ago, Alex Goh said:

an image will enlarge to 2x

In general it's best to avoid scaling above 1. So it might look better if you scaled from 0.5 to 1 and sized the image properly to accomodate.

 

10 hours ago, Alex Goh said:

how to reset GSAP timeline/tween to the point where scroll position is 0px and where image size should be 1x

There are multiple methods to do this:

• When changing the page, use clearProps to clear away all inline styles that GSAP set.
• When changing the page, do .progress(0) on the animation(s) that you need to reset.

And others depending on your setup. If you'd like additional help please create a minimal demo of the situation as this thread discusses.

[Alex Goh]

Thanks Zach. ScrollTrigger is indeed more powerful than coupling with ScrollMagic!

 

One more question... when a scroll animation (with scrub) ended, how do i prevent the animation from reversing when user scroll back that triggers onEnterBack?

 

[ZachSaucier]

Generally you'd kill the ScrollTrigger. If you want to do it part way through see this thread: