TaiwoJazz

@mvaneijgen Firstly, let me start by apologizing for the ping. Also, i completely forget it's weekend. Apologies for that as well. Secondly, i understand how to use gsap and i have spent some times with the docs. The reason i'm not using all the useLayoutEffect, useEffect and gsapContext is because i think with the new useGSAP, i don't need all those hooks again. I guess i was wrong about that. @Rodrigo Thanks for pointing out the proper use of useGSAP, i will try that if it is doesn't work, i will revert back to useLayoutEffect and gsapContext. The question i will like to clarify is that, what is useGSAP hook replacing since it introduction or what does it change. I will be happen if a like to useGSAP docs can be provided as i have search the docs i didn't see any thing on it. Thanks.

@Rodrigo @ryan_labar

So i just started using the new useGSAP hook. Here is a simple code but i'm not sure why the `#nav ul a` is not working and any other animation that follows. Note: Only the first tween, `#navbar ul` played I would also appreciate an example of scrollTrigger with this new hook. Thanks. import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; const useLayoutAnimation = (scope) => { useGSAP( () => { gsap .timeline({ defaults: { opacity: 0, duration: 0.7 } }) .from('#navbar', { ease: 'linear', autoAlpha: 0, duration: 0.5 }) .from('#navbar ul', { y: 50, duration: 0.6, delay: 2, }) .from('#navbar ul a', { scale: 0, stagger: 0.1, transformOrigin: '50% 50%', ease: 'back', duration: 0.5, }); }, { scope } ); }; export default useLayoutAnimation;

I have removed it, still the same thing. Please any chance you can fork this demo? https://stackblitz.com/edit/gsap-react-basic-f48716-3tepz9?file=src%2FApp.js

@Rodrigo Did you see my minimal demo? I think I submitted the wrong link. I edited the post, I don't know why it didn't change! I'm using the latest useGsap here. https://stackblitz.com/edit/gsap-react-basic-f48716-fmdgny?file=src%2FApp.js

HI @ryan_labar Appreciate the help but i still didn't work as expected. import React, { useRef, useState } from 'react'; import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; const MobileNav = () => { const [active, setActive] = useState(false); const [showMenu, setShowMenu] = useState(true); const toggleMenu = () => { showMenu && setActive((prev) => !prev); setShowMenu((prev) => !prev); toggleTimeline(); }; const container = useRef(); const tl = useRef(); const toggleTimeline = () => { active ? tl.current.play() : tl.current.reverse(); }; useGSAP( () => { if (!tl.current) return; tl.current = gsap .timeline({ onReverseComplete() { setActive(false); }, }) .from('.navAnimate', { y: -420, duration: 0.3, ease: 'back' }) .from( '.navAnimate a', { x: -200, duration: 0.3, opacity: 0, stagger: 0.08 }, '-=0.4' ) .reverse(); }, { scope: container } );

Hi guys, i would appreciate if someone could take a look at my minimal demo example. The animation is not workings as expected. I just want the items to navigate in and out without any errors. Also, when the page loads, my console is warning me that the targes are not available which i presumed, i'm calling gsap earlier than expected. Here is my minimal demo @Rodrigo

Thanks a lot and i really appreciate the help. The seconds thread is related to this one. please delete it. So sorry about that.

@Rodrigo Could you take a look please

Hi @Rodrigo Thanks for the response.. Here is a refactor of the minimal demo Here i have removed the custom hook and i made use of GSAP context and this got the scroll trigger working but when i click on the Multi Chain Support button, nothing happens. The animation is not working. On clicking on the button, i want to quickly reverse the first animation then play the animation for the next button clicked (Note: While reversing the first animation before playing the second animation, IF I HAVE TO WAIT FOR THE SAME DURATION TO REVERSE OUT, then i will not reverse it i will just kill it and move to the next animation of the clicked button. Also, in my other app built with nextjs, i'm finding it difficult to register ScrollTrigger there. It will be nice if you could provide me with a snippet. Thanks.

In the minimal demo i provided, i think i'm confused at this junction What am i trying to implement? 1. I have two buttons and once i scroll to the page, the first item should animate 2. On clicking on the button, i want to quickly reverse the first animation then play the animation for the next button clicked (Note: While reversing the first animation before playing the second animation, IF I HAVE TO WAIT FOR THE SAME DURATION TO REVERSE OUT, then i will not reverse it i will just kill it and move to the next animation of the clicked button. I created a useWhyChooseAnimations hook to handle the logic then pass the clicked button to it. This is to ensure that my code is clean as i will have over 8 buttons in the main code There is a minimal demo using codesandbox Would really appreciate all the help i can get now. Thanks guys.

Will appreciate if the mods or anyone in this great community can post links to demos of testimonial sliders build in react. Already got some in vanilla JS but is hell converting it to React. Thanks in advance. @Rodrigo

const ctx = useRef(); // Event Handler const clickEventHandler = () => { ctx.current.onClick(); }; useLayoutEffect(() => { ctx.current = gsap.context((self) => { // use any arbitrary string as a name; it'll be added to the Context object, so in this case you can call onClick() later... self.add("onClick", (e) => { gsap.to(...); // <-- gets added to the Context! }); }, myRef); return () => ctx.current.revert(); }, []); Turns out that this helper function will do the trick i've been struggling to work around but i need it to be mouseEnter and mouseLeave... and i also want to loop through the items i'm hovering over... Thanks in advance...

Not sure what I'm doing wrong here but this code is causing other components not to render properly on mobile unless reload. The matchMedia works but renders only once and doesn't re-render again even when I moved the mm constant out of the effect function and specify mm as a dependency in the useEffect. const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const mouseHoverHandler = (index) => { const tween = tls.current[index]; tween.reversed(!tween.reversed()); }; useIsomorphicLayoutEffect(() => { const mm = gsap.matchMedia(); let ctx; mm.add('(min-width: 768px)', () => { ctx = gsap.context(() => { const cards = gsap.utils.toArray('.box'); cards.forEach((card) => { const q = gsap.utils.selector(card); const tl = gsap .timeline({ defaults: { duration: 0.5, autoAlpha: 1, ease: 'power1.inOut' }, }) .to(q('.box div'), { opacity: 1, scale: 1, transformOrigin: 'center center', }) .from( q('.box p'), { opacity: 0, }, '<' ) .reverse(); tls.current.push(tl); }); }, dashboard); }); return () => { mm.revert(); ctx.revert(); }; }, []);

Thanks a bunch...

@Rodrigo Could you help me take at a look at this minimal demo and help me figure out what i'm doing wrong... I'm just trying to loop through my nav items and play my animation on hover... Thanks...

Thanks guys... I will check GSAP scrollsmoother out.

Hi guys, So I checked GSAP example on Locomotive Scroll and I found out that it doesn't work again... I understand that the GSAP team is not managing locomotive and it's a third-party dependency I could say, but considering the fact that it's one of the listed examples in the docs... If it's no longer compatible with GSAP, I think it will be better GSAP remove it from the docs... Even the current example shown the in the docs is not working... Kindly check...

I would advise you to provide a minimal demo in codesandbox (you can set it up with vite and other libraries you are using to stimulate your main code base) and tag @Rodrigo he will check and help you out anytime he's online.. Cheers..

In order for you to get a better and fast response.. It will really be better if you provide a minimal demo.. I use react and it's a little bit tedious creating a minimal demo every time I need help but guess what? That process is now part of me.. With the minimal demo, I get solutions quickly. You may think your explanation is detailed enough but trust me, it's only clear to you ? If your code is not too complex or it's just a few lines.. Then posting a code snippet would be great as well.. Cheers...

Waoo.. This clears my doubt.. Thanks a lot.. I really appreciate it.. I'm already in love with that superpowers already ??

Hi, I will like to confirm how club GreenSock works... Let's say I subscribe to ShockinglyGreen @ $149/year. If I use these plugins for let's say 3 different projects for 3 different clients. Does it mean that I will have to renew the subscription after a year for all the 3 projects or do I just need to renew my own subscription and the plugins still works for the projects? Either way, what happens if I did not renew the subscription? The plugins stop working in the projects I used them in without breaking the app or throwing an error or what? I will like to get clarification on this before discussing it with my clients...

I was able to fix it... setShow state started at false instead of true... Thanks..

@Rodrigo Going though the code to figure out the reason why the open navbar button doesn't work on the first click when the dom loads... works on the second click only... If refresh, it won't work on first click...

Hi @Rodrigo I must commend you for helping me out here... I really appreciate it... I have checked your solution and it's pretty impressive... There is no way in hell I'm was ever going to come up with that logic... I will seriously take the time to study your solution... You are the best... Thanks a lot...