titungdup Posted January 10, 2022 Share Posted January 10, 2022 I am having a very weird issue with scrolltrigger. I am shifting the navbar logo using scrollTrigger. Initially it start from top where the navbar is but as i scroll through the page the trigger start position shift mid way to the page and the animation starts again which was only supposed to happen when i have scrolled towards the navbar position. This is the effect i am using. Is there any issue with this code? Let me know if there is any issue with this code and if necessary i'll also try to recreate the issue on codesandbox but i am not sure if i'll be able to recreate it. I know this is very vague question, let me know if i need to explain more. It happens especially on iPad, less frequent on desktop(chrome). useEffect(() => { ScrollTrigger.saveStyles(refMenu.current) ScrollTrigger.matchMedia({ '(min-width: 768px)': function () { gsap.fromTo( refMenu.current, { y: '120px' }, { y: '0', scrollTrigger: { trigger: refMenu.current, start: 'top top+=126px', end: 'bottom ', scrub: true, markers: true, id: 'nav-scroll', }, } ) }, }) }, []) Thanks. Link to comment Share on other sites More sharing options...
Carl Posted January 10, 2022 Share Posted January 10, 2022 it looks like the thing you are animating is also your trigger. if your trigger is moving around it is going to cause problems for ScrollTrigger's calculations. You should use something else as your trigger. perhaps create a parent element that wraps your trigger. 1 Link to comment Share on other sites More sharing options...
titungdup Posted January 10, 2022 Author Share Posted January 10, 2022 Hi Carl, that was also my initial assumption but i am using navbar container as a trigger which is fixed at the top and i am sure it is not moving. I also tried using different trigger but the issue was still there. I am wondering if this code,ScrollTrigger.saveStyles(refMenu.current),is causing the issue. Is that supposed to be inside the useEffect hook? Link to comment Share on other sites More sharing options...
Carl Posted January 10, 2022 Share Posted January 10, 2022 sorry I don't know what "navbar container" is but your code shows your trigger is the same thing that is being animated . perhaps if you post a demo we'll be able to provide more accurate help. 1 Link to comment Share on other sites More sharing options...
titungdup Posted January 10, 2022 Author Share Posted January 10, 2022 I changed the code but it's still not working. useEffect(() => { ScrollTrigger.saveStyles(refMenu.current) ScrollTrigger.matchMedia({ '(min-width: 768px)': function () { gsap.fromTo( refMenu.current.querySelector('.brand-logo'), { y: '120px' }, { y: '0', scrollTrigger: { trigger: refMenu.current, start: 'top+=126px top+=126px', end: 'bottom+=126px ', scrub: true, markers: true, id: 'nav-scroll', }, } ) }, }) }, []) I have some screenshots, not sure if these helps. If you have any hints what might be the issue, let me know i'll explore more into it. Sorry if these are not that helpful. Link to comment Share on other sites More sharing options...
Carl Posted January 10, 2022 Share Posted January 10, 2022 unfortunately the images don't really help. Just make a very simple demo, none of the real artwork, just some colored divs that represent your layout. If you can replicate the issue without React even better, but here is a starter CodeSandbox demo for you https://codesandbox.io/s/ut42t Link to comment Share on other sites More sharing options...
titungdup Posted January 10, 2022 Author Share Posted January 10, 2022 Thanks for your feedback Carl. I'll see if i can create a demo for this. Meanwhile i'll disable the animation for now. Also i ran into some issue. I hope its okay to ask them here. I have a scrollTriggered dark theme switcher applied on the homepage but it is not required on other pages. But when i change route to other page i am still seeing that scroll triggered theme switch even though that component is not loaded in other pages. I tried ScrollTrigger.kill() but it just killed all scroll trigger animation. Also read some forum post that suggested to clear or pause the scroll trigger but it's not working. I just need to disable the animation on inner pages and again load the animation when switching to homepage. Any suggestion on this? Link to comment Share on other sites More sharing options...
OSUblake Posted January 10, 2022 Share Posted January 10, 2022 1 hour ago, titungdup said: I just need to disable the animation on inner pages and again load the animation when switching to homepage. Any suggestion on this? It's very hard to advice without a minimal demo. The simpler it is, the better. 😁 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