SVG Morph in NextJS

[Mark Rosenberg]

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!

[GreenSock]

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? 

[Mark Rosenberg]

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>

[GSAP Helper]

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. ✅

[Mark Rosenberg]

@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?

[GreenSock]

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. 

[Mark Rosenberg]

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...

[GreenSock]

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. ✅

[Mark Rosenberg]

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.

[GreenSock]

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. 🙌