Bartzel Posted December 14, 2021 Share Posted December 14, 2021 Good day! I have a pretty simple ScrollTrigger setup; where a bar with sticky titles animates up or down, based on the scroll direction. But there's a small bug / unwanted behaviour in it: when the content changes (certain elements can be removed), even if it's less than a pixel, the ScrollTrigger fires and the header bar moves up. Is there any way to add a threshold of some sort? This is what i currently have: const headingScrollTrigger = ScrollTrigger.create({ start: '400', end: 'max', scrub: 1, fastScrollEnd: true, onEnter: () => gsap.to('.compare__heading-container', { duration: 0.5, ease: 'sine.out(1.7)', y: 60, opacity: 1, }), onLeaveBack: () => gsap.to('.compare__heading-container', { duration: 1, ease: 'expo.out', y: -210, opacity: 0, }), onUpdate: (self) => { if (breakpoint >= 4) { self.direction === -1 ? (document.querySelector('.compare__heading-container').style.transform = 'translateY(120px)') : (document.querySelector('.compare__heading-container').style.transform = 'translateY(60px)'); } }, }); Link to comment Share on other sites More sharing options...
Cassie Posted December 14, 2021 Share Posted December 14, 2021 Hey Bartzel! You possibly could check for velocity? I can't remember exactly what you get back value-wise without a demo but you could only do the transform logic if it's scrolling above a certain velocity. onUpdate: (self) => { console.log(self.getVelocity()); } I'd also usually recommend using GSAP to tween that y value rather than directly target the style like that - but again, I'm not sure exactly what you're doing without seeing it working. Link to comment Share on other sites More sharing options...
GreenSock Posted December 14, 2021 Share Posted December 14, 2021 Yeah, I don't quite understand the question here - a minimal demo will go a LONG way to getting you a solid answer. But I will say that you DEFINITELY shouldn't be directly assigning transforms values in one function, and then trying to tween them in another. Set all transform values via GSAP because it'll perform better, be more accurate, and solve various browser inconsistencies. Link to comment Share on other sites More sharing options...
Bartzel Posted December 16, 2021 Author Share Posted December 16, 2021 On 12/14/2021 at 9:47 PM, GreenSock said: Yeah, I don't quite understand the question here - a minimal demo will go a LONG way to getting you a solid answer. But I will say that you DEFINITELY shouldn't be directly assigning transforms values in one function, and then trying to tween them in another. Set all transform values via GSAP because it'll perform better, be more accurate, and solve various browser inconsistencies. A demo will be quite hard, as there's a lot of other elements and code that surround this. It may also just be React, triggering a re-render and the ScrollTrigger going back to it's initial state. As for the transforms; i initially had a separate tween, which I called in the ScrollTrigger. This resulted in very buggy behaviour, probably because it's based on scrolling up or down. Tweens where abruptly overwriting each other. For some reason, it works fine with the transforms. On 12/14/2021 at 6:43 PM, Cassie said: Hey Bartzel! You possibly could check for velocity? I can't remember exactly what you get back value-wise without a demo but you could only do the transform logic if it's scrolling above a certain velocity. onUpdate: (self) => { console.log(self.getVelocity()); } I'd also usually recommend using GSAP to tween that y value rather than directly target the style like that - but again, I'm not sure exactly what you're doing without seeing it working. I'll look into the velocity, thanks! Link to comment Share on other sites More sharing options...
Bartzel Posted December 16, 2021 Author Share Posted December 16, 2021 Update; with a bit more research, I found out that ScrollTrigger returns to its OnEnter state after React fires a re-render. Any idea how to keep it from doing that? Link to comment Share on other sites More sharing options...
Cassie Posted December 16, 2021 Share Posted December 16, 2021 Have you read our react articles at all? Lots of helpful tips in there Link to comment Share on other sites More sharing options...
Bartzel Posted December 16, 2021 Author Share Posted December 16, 2021 Interesting indeed, thanks! I did manage to get it working, with the getVelocity() and by removing the onEnter animation. Also I've changed the transforms to gsap.to animations. Now that the scroll direction is controlling the animation, it seems to work as expected. 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