Mark Rosenberg Posted February 13 Share Posted February 13 I'm fairly new to this, so hopefully this isn't too basic, but how do I use SVG Morph in NextJS when using the next/image component? Here is a copy of the code I am working with. Don't exactly know how to set up a demo or anything. Any insight would be amazing. Thanks! Link to comment Share on other sites More sharing options...
GreenSock Posted February 13 Share Posted February 13 Thanks for being a Club GSAP member, @Mark Rosenberg! 💚 In order for MorphSVG to do its work, it must have access to the <path> node itself, but if you're merely embedding the SVG as an external file, the browser won't allow that (security). You have to actually put the <svg>...</svg> code itself into the document where you're going to do the morphing. Does that make sense? 1 Link to comment Share on other sites More sharing options...
Mark Rosenberg Posted February 13 Author Share Posted February 13 Plugging SVG's directly into React/NextJS throws this error: Error: × JSX Namespace is disabled by default because react does not support it yet. You can specify jsc.transform.react.throwIfNamespace to false to override default behavior I think the solution is to convert the SVG into JSX syntax using something like SVGR. This is what I get after converting it to JSX. Which <path> node would I target for morphing? <svg xmlns="http://www.w3.org/2000/svg" width={1366} height={768} viewBox="0 0 1024.5 576" {...props} > <defs> <clipPath id="a"> <path d="M16.652 11.246h991.016v553.227H16.652Zm0 0" /> </clipPath> <clipPath id="b"> <path d="M63.879 11.246h896.234a47.226 47.226 0 0 1 47.227 47.227v459.054c0 26.082-21.145 47.227-47.227 47.227H63.88c-26.082 0-47.227-21.145-47.227-47.227V58.473c0-26.082 21.145-47.227 47.227-47.227Zm0 0" /> </clipPath> </defs> <g clipPath="url(#a)"> <g clipPath="url(#b)"> <path fill="none" stroke="#fff" strokeWidth={5.99704} d="M63.879 11.246h896.234a47.226 47.226 0 0 1 47.227 47.227v459.054c0 26.082-21.145 47.227-47.227 47.227H63.88c-26.082 0-47.227-21.145-47.227-47.227V58.473c0-26.082 21.145-47.227 47.227-47.227Zm0 0" /> </g> </g> </svg> Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 13 Share Posted February 13 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer. See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ 1 Link to comment Share on other sites More sharing options...
Mark Rosenberg Posted February 13 Author Share Posted February 13 @GSAP Helper, I am actually looking to cancel my account and get a refund for my purchase. I can't get through via the Contact page, I keep getting errors. Can you put me in touch with someone who can take care of this? Link to comment Share on other sites More sharing options...
GreenSock Posted February 13 Share Posted February 13 Hey @Mark Rosenberg Of course we can get you a refund and cancel your membership, but here's a quick Stackblitz showing your path morphing in Next.js: https://stackblitz.com/edit/stackblitz-starters-mxa6gh?file=app%2Fpage.tsx Does that help? Do you still want to cancel/refund? Sorry about the /contact page error. We're looking into that right away. Not sure what's going on there, but we'll get it fixed. Link to comment Share on other sites More sharing options...
Mark Rosenberg Posted February 13 Author Share Posted February 13 Thanks! I really appreciate the help and my apologies for doing this in the forum... just couldn't contact support any other way. I would still like to move forward with the refund. Thanks again and my apologies for being a pain... Link to comment Share on other sites More sharing options...
GreenSock Posted February 13 Share Posted February 13 Nah, you weren't a pain at all. No worries. I've cancelled your membership per your request. Please delete all the bonus files now that you're no longer licensed to use them. Let us know if there's anything else we can do to help! Good luck with your project. Oh, and the contact-us form is now fixed. ✅ Link to comment Share on other sites More sharing options...
Mark Rosenberg Posted February 13 Author Share Posted February 13 Thanks! Files have been deleted. I definitely respect the honor system. Thank you for all your help. If I'm being completely honest, and for any future readers, my decision here was mainly because I am taking on more responsibilities with this startup and won't be able to build this all out myself like I had hoped (something I wanted to learn). Nothing to do with GSAP - which seems amazing. Link to comment Share on other sites More sharing options...
GreenSock Posted February 13 Share Posted February 13 4 minutes ago, Mark Rosenberg said: Nothing to do with GSAP - which seems amazing. Oh, that was very kind of you to clarify, thanks! Good luck with the startup. 🙌 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now