Starting animation on page load, stopping on scroll, starting again when at top of page

[Studio North]

I have 2 animations that start on page load. Firstly the text, then a repeating nudge. I want the repeating nudge to stop when the user scrolls but start again when the go back to the top of the page. I've got it working except for the stopping and restarting and I can't fathom out how to do it. My demo shows the nudge doesn't work if the ScrollTrigger is in, take that out and page load works but not the stop/restart.

 

Any help appreciated, thanks

 

See the Pen EaVzvJe by thebobajob (@thebobajob) on CodePen.

[Rodrigo]

Hi,

 

The main issue is here:

const hph_tl2 = gsap.timeline({
  // ...
  repeat: -1,
  scrollTrigger: {
    // ...
    scrub: true,
  }
});

You have a ScrollTrigger instance that starts at some point and ends after a fixed number of pixels (16 in your case). Also you have an infinite Timeline, that will loop for ever. Then you're scrubbing that timeline in that number of pixels but, how can we scrub something infinite over a finite number of pixels? Is logically impossible, see the problem?

 

Perhaps use toggleActions in order to play the animation onEnter and pause it onLeave:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#toggleActions

 

I created a fork of your demo using toggleActions instead:

See the Pen GgpayBK by GreenSock (@GreenSock) on CodePen.

 

Finally is worth mentioning that 16 pixels is virtually nothing, in some cases (depending on the specific browser configurations each user can have) a single wheel event can scroll 100 pixels, so users might never see the animation at all with that small value.

 

Hopefully this helps

Happy Tweening!

[Studio North]

I have this working now, thanks BUT not at "top top" only when "top 1px" - why is that?

 

Thanks

 

See the Pen EaVzvJe by thebobajob (@thebobajob) on CodePen.

[Rodrigo]

1 minute ago, Studio North said:

BUT not at "top top" only when "top 1px" - why is that?

Because when the page loads the start trigger is at the start point but not past it. The trigger has to pass the start point so the animation can play, that's why "top 1" works on page load because the trigger already passed the start point.

 

Hopefully this clear things up

Happy Tweening!

[Studio North]

Thank you!