en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en fr en en en en en en en en en en en en de en en en en en de de en en en en en de de en en en en en de en de en en en en en de en en en en en en en en en en en en en en en en en en en en en fr en eu en pt en en en es en en en de en hu en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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?
ScrollTrigger start position shift randomly
titungdup replied to titungdup's topic in GSAP
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?
titungdup started following SyntaxError: Unexpected token 'export' on NPM import and ScrollTrigger start position shift randomly January 10
ScrollTrigger start position shift randomly
titungdup posted a topic in GSAP
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.
How to run GSAP only when the target class/id is available?
titungdup replied to titungdup's topic in GSAP
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.
How to run GSAP only when the target class/id is available?
titungdup replied to titungdup's topic in GSAP
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.
How to run GSAP only when the target class/id is available?
titungdup posted a topic in GSAP
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?
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“Sincerely, the people behind GSAP are sorcerers”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“@greensock is just pure awesomeness. What more can be said?”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“GSAP IS the animation library and has been for years. If you're gonna learn one - this is it.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.