[Question] How to use KUTE.js SvgMorph in NextJS?

[Ishan Shishodiya]

I have a question on how to use the svgMorph in a NextJS project. I am using the pages directory in Next 13. I installed the project using yarn add kute.js but what should I do next? I can see that I can import svgMorph but it doesn't really have any to or from functions. There isn't a kute object in the library like gsap has a gsap object so how can I use the to and from functions here?

My goal is to morph an SVG to another and hoped a code like this would do the job -

kute.fromTo("#start", { path: "#start" }, { path: "#end" });

Thanks in advance for the help!

[thednp]

You need to use React useRef() hook. Something like this:

function Component() => {
  const path1 = useReft();
  const path2 = useRef();


  return
(
    <svg xmlns onClick={() => KUTE.fromTo(path1, { path: path1 }, { path: path2 });}>
      <path ref={path1}>
      <path ref={path2}>
    </svg>
)
}

But you can use the onClick property on semantics like <button> and even other types of events.

[Ishan Shishodiya]

You need to use React useRef() hook. Something like this:

function Component() => {
  const path1 = useReft();
  const path2 = useRef();


  return
(
    <svg xmlns onClick={() => KUTE.fromTo(path1, { path: path1 }, { path: path2 });}>
      <path ref={path1}>
      <path ref={path2}>
    </svg>
)
}

But you can use the onClick property on semantics like <button> and even other types of events.

Two questions on this -

1. How did you import the KUTE object in react?
2. Would IDs and classNames not work and we'd only need to use refs?

[thednp]

It should work with IDs and className as well, now on the import part, a future version should solve any issue you might encounter trying to do import KUTE from 'kute.js'.

[Ishan Shishodiya]

Ahh gotcha then, and by "future version" does this mean that there's no way of using Kute in Next right now?

[thednp]

You should try, it may not work with Typescript and everything but give it a try nevertheless.

EDIT: after some search I found this.

[Ishan Shishodiya]

I tried it but it doesn't work. Thanks for the help though, I tried KUTE in vanilla JS and it's really impressive. Even big libraries like GSAP need a paid license for morphing SVG, while you are handing it out for free. Thanks for your work! You can reach out to me if you need any sorts of help, I don't know much about the inner working of these things but would be happy to contribute while learning new things!

[thednp]

@slyofzero when the time is right I'll remember that and call you in for testing.