titungdup

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?

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.

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?

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.

Is ScrollTrigger free to use? I am not a GreenSock Club member. The issue exists on multiple page website so i am not sure if i can replicate it in codepen. I'll go with checking if the element exists. Thank you so much for your feedback.

Hi @ZachSaucier, I am using Hugo and jquery. And i am also using scrollmagic with gsap. I haven't used page transitions, it just redirects to different route. Yes, i am using a single JS file bundled using webpack so all the JS is applied to every page. Should i split it? I think it's a bit hard to split the JS so i went with bundled option.

I have applied gsap animation on a home page but when i navigate to other pages then there is a warning saying "gsap target not found". I have found how to turn it off but i want to solve the warning and not just turn it off. One solution i have come up with is applying the animation only when the class/id is found by putting a condition. But i don't think that is a very good way because i'll have to check every class or id that i use. Is there any better way to handle this issue?