Jump to content
Search Community

Bind (scrub) animation to scroll down but not on scroll up (nuxt3)

aok test
Moderator Tag

Recommended Posts

Hi folks,

 

I'm using nuxt3 with GSAP/Scrolltrigger and my desired effect is for the header to move up `yPercent: -1` as the user scrolls down, bound to scroll using `scrub: 1`, but as soon as the user scrolls up it shouldn't scrub and should animate back to position (yPercent: 0) at 250ms. I'm struggling to work this out. I know I could use something like `onUpdate: (self)` but unsure how to use this with the onMounted hook.

 

Any help would be greatly appreciated. I've created a demo here:

 

https://stackblitz.com/edit/nuxt-starter-xyi2qm?file=app.vue

Link to comment
Share on other sites

Hi @Rodrigo thanks so much for the help.

 

This is what I was thinking BUT on scroll down it should scrub, like my demo, but on scroll up it shouldn't and do what your demo does.

 

Does that make sense? Not sure it's possible.

Link to comment
Share on other sites

Hi,

 

Take a look at this post:

Is not the same approach as you still tie the progress of an animation to a ScrollTrigger instance but not using the scrub property but the onUpdate.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Yep, this is related to the fact that you're using a conditional block (if/else) with two different conditions:

if (self.direction === 1 && self.progress > tween.progress())

So if either one of those is falsy the tween reverses and that's not what you want. You need to check only the scroll direction nothing more, so is better to just add an extra conditional block and it should work the way you need:

ScrollTrigger.create({
  start: 'top top',
  end: 'center top',
  //scrub: 1,
  markers: true,
  onUpdate: self => {
    if (self.direction === 1 && self.progress > tween.progress()) {
      tween.progress(self.progress)
    }
    if (self.direction < 0) {
      tween.reverse();
    }
  }
});

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

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