How to disable Scroll Trigger on scroll up

[animationmagic 5 Likes (Newbie)]

Hi there,

 

I'm trying to have this ScrollTrigger animation run only once when the user scrolls down the first time. When they scroll back up, all elements are meant to be static without any animations anymore. Basically, I only want to have the animation on scroll work only once.

 

When I use once: true however it adds all the white space above the section on scroll up.

 

Can you help?:)

See the Pen qBjzVyj by lisaschumann (@lisaschumann) on CodePen

[akapowl 5,225 Likes (Superhero)]

Hey @animationmagic

 

You could e.g. use the onLeave callback of the ScrollTrigger to disable the ScrollTrigger (which would be neccessary to get rid of the white space added by the pin-spacer) and force the hooked-up animation's progress to 1.

 

Does something like this work better for you?

 

See the Pen 98d4cdb407420d290296bce2affc5c6b by akapowl (@akapowl) on CodePen

 

[Cassie 5,411 Likes (Superhero)]

+1 for bonus dogs.

[akapowl 5,225 Likes (Superhero)]

36 minutes ago, Cassie said:

+1 for bonus dogs.

 

The pen kept loading forever, so I just swapped out the images 😅

[animationmagic 5 Likes (Newbie)]

@akapowl thanks so much that works great and now the animation stops once you've scrolled through once:) Loving the dogs!

 

Once the animation goes to the onLeave function it jumps to the next section underneath though. Is there a way to avoid that jumping?

[akapowl 5,225 Likes (Superhero)]

Try this:

 

  onLeave: function(self) {    
    self.scroll(self.start);	// <-- sets position to start of ScrollTrigger
    self.disable()
    self.animation.progress(1)
  }

 

See the Pen 2f164f6fc6ea04ad8480421d9b3cd011 by akapowl (@akapowl) on CodePen

 

[animationmagic 5 Likes (Newbie)]

Thanks so much @akapowl that works GREAT. When I enable smooth scrolling with it, it seems to be causing an issue though. Did that happen to you before too? I think I can disable smooth scrolling for now, but would be great to know how you deal with it:)

 

See the Pen qBjzVyj by lisaschumann (@lisaschumann) on CodePen

[akapowl 5,225 Likes (Superhero)]

All I can tell you is that in many cases "scroll-behavior: smooth" will cause problems with ScrollTrigger as it interferes in some way, so it's probably best not to use it - but I can not give you a proper explanation on that. If you throw that as a term into the search, you will find quite a few threads where that is mentioned.

[animationmagic 5 Likes (Newbie)]

That makes sense! Thanks for your help @akapowl - saved the day:)

[prinzjoyal 0 Likes (Newbie)]

Hey everyone.

 

Is it possible to disable scroll up interaction? The interaction shown is while the user is scrolling, but if the user is scrolling and doesnt finish the animation, then it still allows for a scroll up.

[Cassie 5,411 Likes (Superhero)]

Hiya! yep -

See the Pen YzadbxM by GreenSock (@GreenSock) on CodePen

 

If you need more help please start a new thread with a minimal demo, thanks!