chacrasoftware

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.

How to add custom typings when registering an effect? it would be very helpful if the custom effect is properly type not just set to any.

Having trouble deploying in heroku, the build outputs error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fbusiness/-/business-3.10.4.tgz: Request failed \"403 Forbidden\"". here's our .npmrc //npm.greensock.com/:_authToken=${GSAP_TOKEN} @gsap:registry=https://npm.greensock.com package.json "gsap": "npm:@gsap/business" we are using yarn as our package manager, only instruction available is for vercel and netlify, need help for deploying in heroku thank you!

Using latest version of NextJS, importing and registering plugins like ScrollTrigger and ScrollToPlugin works fine but others as tested so far like DrawSVGPlugin, InertiaPlugin and Draggable renders an error Module not found: Can't resolve 'gsap/dist/DrawSVGPlugin'. I'm importing the umd as suggested like so: import { DrawSVGPlugin } from 'gsap/dist/DrawSVGPlugin' gsap.registerPlugin(DrawSVGPlugin)