aok Posted January 9, 2023 Share Posted January 9, 2023 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 More sharing options...
Rodrigo Posted January 9, 2023 Share Posted January 9, 2023 Hi, Maybe you're looking for something like this: See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen Hopefully this helps. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
aok Posted January 9, 2023 Author Share Posted January 9, 2023 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 More sharing options...
Rodrigo Posted January 9, 2023 Share Posted January 9, 2023 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! 1 Link to comment Share on other sites More sharing options...
aok Posted January 10, 2023 Author Share Posted January 10, 2023 Thanks again for the help @Rodrigo – much appreciated. I think I understand this but I'm a little stuck with what I need write in the onUpdate for the scroll up (to essentially set the progress to 1) but then if you scroll down, then it binds the progress again. See the Pen dyjvVBw by richardcool (@richardcool) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 11, 2023 Share Posted January 11, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now