[Question] How to use KUTE.js SvgMorph in NextJS?
slyofzero opened this issue · 7 comments
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!
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.
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 -
- How did you import the KUTE object in react?
- Would IDs and classNames not work and we'd only need to use refs?
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'
.
Ahh gotcha then, and by "future version" does this mean that there's no way of using Kute in Next right now?
You should try, it may not work with Typescript and everything but give it a try nevertheless.
EDIT: after some search I found this.
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!
@slyofzero when the time is right I'll remember that and call you in for testing.