chacrasoftware

Here is a temporary fix I guess when using useGsap and NextJS app dir. register the plugin outside of the components, and on your root layout body add suppressHydrationWarning, this is fine I think, next-themes also uses this approach. I also posted an issue on github https://github.com/greensock/react/issues/8#issuecomment-2158622840

Hi @Rodrigo, Thank you! CSS.escape() did the trick! ?

I have a component with dynamic id usinguseId()hook from react. it generates a string that contains a colon ":R1fakq:" something similar to this. then I will use this id to trigger a scrollTo with ScrollToPlugin but it throws an uncaught error. I tried manually setting the id with a colon character and it render the same issue.

Hi awesome peeps! I just wanted to share this npm package we created that have premade hooks and helper components that might help or speed up your development, been using in all of our project, feel free to submit issues/suggestions if you find any. @chacra/gsap-react - npm (npmjs.com)

run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook. hope this helps

Hi @Rodrigo just wanted to clarify, when you said check for the router change, do I also need to set back the toggleSmootherReady to false on the useEffect return method? const {pathName} = useRouter(); useIsomorphicLayoutEffect(() => { let ctx = gsap.context(() => { ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1, effects: true, smoothTouch: 0, }); }); toggleSmootherReady(true); return () => { toggleSmootherReady(false); ctx.revert(); } }, [pathName]);

Hi @Rodrigo Appreciated the response! really helpful! Question regarding the React Context approach, checking for smootherReady is now required for all the components that uses ScrollTrigger correct? again, big thanks! ❤️

Hi @Rodrigo here is the demo and it shows the same issue I am having, https://stackblitz.com/edit/nextjs-aqmmjs?file=components/layout-wrapper.js if you notice the second box when the trigger happens the animation just jump to end. it happens only with the following. 1. initial mount -> after save (hot reload) it will work fine 2. when using timeline. if swapped with regular tween will just work fine 3. disable/uncomment the ScrollSmoother instance will just work fine

getting this issue after the update with ScrollSmoother, on dev the animation on scrolltrigger works fine, but after build the trigger position is correct but the animation just jumps to the end, I'm using NextJS 13 and GSAP@latest, removing ScrollSmoother works too, but we need that plugin

with the new gsap.context how can we use alongside match media? do we need to kill the match media or the context.revert() will do the job?

// MySplitText.tsx const ref = useRef<HTMLDivElement>(null) const splitText = useRef<SplitText>() useEffect(() => { let ctx = gsap.context(() => { splitText.current = new SplitText('.text',{ type: 'chars' }) },ref) },[]) <div ref={ref}> <p className="text">My Text</p> </div> /** * Root component- App.tsx */ <div> <MySpliteText/> <p className="text">My Text at root component</p> // <-- this is got selected </div> Does someone also experience this scenario? The selector inside the context is leaking outside its scope, or is there something wrong with instantiation of the `SplitText` plugin? I have to pass it to a `ref` so I can use it on a callback animation.

Hi, just wanted to ask if I made the proper way of extending the gsap.effects object? I created an effect using registerEffect and I have some props that I wanted to apply type safety when using gsap.effects.myEffect("property type inferred here") declare namespace gsap { interface EffectsMap { [key: string]: any; myEffect: ("properties here") => gsap.core.Timeline } const effects: EffectsMap; }

Hello! can anyone help me to figure out how to animate the width of the active item? I'm using the horizontalLoophelper function and triggering the animation on the onChange callback but the carousel got messed up. thank you in advance!

Was following all the codepen example above but looks like all of them have this same weird issue, could be something broke from recent gsap update? I have replicated the codepen in our project and has the similar issue

GSDevTools.kill is not a function -- I having this error also there are no exposed methods like the example above.