Leaderboard

@akrdesign You forgot to register the Draggable plugin to GSAP. You can do so by adding this below your Draggable import: gsap.registerPlugin(Draggable)

Hello. I saw that there is now an official GSAP React package. I know you guys haven't announced it yet and it might not be ready, but as a React/Next.js user, this is huge! I'm wondering what's the best way to contribute to this package whether it be docs, improvements, etc. I'm really keen to help, if possible

Well that is very kind of both of you! Thanks so much. Yes, we're close to announcing the @gsap/react package publicly. As for contributing, the best things you could do would be to offer feedback, suggestions, and also it's a TREMENDOUS help when you help other people especially in these forums when they run into React-related challenges (or anything really). 💚

yes, this opens a whole new world with unlimited possibilities with react hooks, maybe 2024 will be the year for gsap/react also maybe something for three and r3f 🙏

check this demo i think that's what you need https://codepen.io/GreenSock/pen/NWMxRvM Don't forget to check the other demos and collections you will find some cool stuff 😉

We hadn't officially announced the package yet, so the Github repo was still private but I just set it to public so you should be able to get to that now. I'm not familiar with pnpm or why it might be giving you problems. What error are you getting exactly? The minimal demo you provided is working fine, right? Are you just saying if you try doing something locally on your system it's not able to get the @gsap/react package?

Hi, Just create an array for each group of circles, make each animation a GSAP Timeline and using the position parameter add the animation for the position at the start of the timeline (if you want that) and using function based values, loop through the target values. Something like this: https://svelte.dev/repl/a97f666ce709488b8a32024949912587?version=4.2.7 Hopefully this helps. Happy Tweening!

Hi, I'm not 100% sure about what you're asking but maybe something like this: https://codepen.io/GreenSock/pen/OJdvMEE Hopefully this helps. Happy Tweening!

Hi, You're doing the exact same mistake you were doing in your previous demo: You are morphing the rectangle and not the clip path. On top of that your clip path has some big dimensions but your SVG's view box is 100 by 100 so a lot of your clip path won't be visible. Finally your rectangle shape doesn't have dimensions in it, just the x and y positions and the corner radius. Although your corner radius is 0 so basically that's a regular rectangle so no need for that particular attribute IMHO: <rect id="rounded-rectangle" x="0" y="0" rx="0" fill="#FFDD00" stroke="black" /> You have to specify a width and height as well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect Here is a fork of your codepen: https://codepen.io/GreenSock/pen/WNPOBmY Hopefully this helps. Happy Tweening!

The easiest solution for dashed lines is to animate a mask as @PointC shows here. https://www.motiontricks.com/svg-dashed-line-animation/