Jump to content
Search Community

How to disable Scroll Trigger on scroll up

animationmagic test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 3
  • Haha 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

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...