blumaa@gmail.com

@OSUblake @Rodrigo As *funny* as it is to recommend just using Vue, as a React guy, I can't get on board with this!

By the way.. how do I add Morph Dependencies to CodeSandBox?

Thank you to @OSUblake. It totally works the way you outlined above. I would love to see some documentation on using gsap with React Hooks. The page you previously mentioned (https://greensock.com/react) is quite outdated. I didn't find it very useful in the past. But I'd love to read an updated article. Thank you!

Your article is extremely insightful. Thank you for that! However, when I try to implement a simple play/reverse feature for my animation, I'm not getting it to work. Does this have something to do with how React handle the play/reverse features in Gsap? Thanks! import React, { useRef, useEffect, useState } from "react"; import { gsap, Power3 } from "gsap"; import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; const MenuMorph = () => { const [show, setShow] = useState(false); let topLine = useRef(null); let middleLine = useRef(null); let bottomLine = useRef(null); let closeCircle = useRef(null); let closeLine2 = useRef(null); let closeLine1 = useRef(null); let tl = gsap.timeline({paused: true}).to(topLine.current, 1, { morphSVG: { shape: closeCircle.current, shapeIndex: 22 }, ease: Power3.easeOut, }) .to(middleLine.current, 1, { morphSVG: { shape: closeLine2.current, shapeIndex: 1 }, ease: Power3.easeOut, }) .to(bottomLine.current, 1, { morphSVG: { shape: closeLine1.current, shapeIndex: 1 }, ease: Power3.easeOut, }); const handlePlay = () => { tl.play() }; const handleReverse = () => { tl.reverse() }; return ( <> <div class="nav"> <button id="play" onClick={()=>handlePlay()}> play() </button> <button id="pause">pause()</button> <button id="resume">resume()</button> <button id="reverse" onClick={()=>handleReverse()}> reverse() </button> </div> <svg id="menu_morph" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" > <title>menuMorph</title> <g id="menu"> <g id="Menu-2" data-name="Menu"> <path id="topline" d="M382.05,1109.73H743a12,12,0,0,0,0-24.06H382.05a12,12,0,0,0,0,24.06Z" transform="translate(-326 -974)" ref={topLine} /> <path id="middleline" d="M743,1206H382.05a12,12,0,0,0,0,24.06H743a12,12,0,1,0,0-24.06Z" transform="translate(-326 -974)" ref={middleLine} /> <path id="bottomline" d="M743,1326.27H382.05a12,12,0,0,0,0,24.06H743a12,12,0,0,0,0-24.06Z" transform="translate(-326 -974)" ref={bottomLine} /> </g> </g> <g id="close"> <path id="closecirlce" d="M562.5,1029.5c-103.94,0-188.5,84.56-188.5,188.5s84.56,188.5,188.5,188.5a187.61,187.61,0,0,0,130.63-52.6,7.67,7.67,0,1,0-10.64-11.06,172.31,172.31,0,0,1-120,48.32c-95.48,0-173.16-77.68-173.16-173.16S467,1044.84,562.5,1044.84,735.66,1122.52,735.66,1218a172.52,172.52,0,0,1-11.6,62.44,7.67,7.67,0,1,0,14.31,5.54A187.72,187.72,0,0,0,751,1218C751,1114.06,666.44,1029.5,562.5,1029.5Z" transform="translate(-326 -974)" ref={closeCircle} /> <path id="closeline2" d="M648.78,1131.72a7.67,7.67,0,0,0-10.85,0L476.22,1293.43a7.67,7.67,0,1,0,10.85,10.85l161.71-161.71A7.67,7.67,0,0,0,648.78,1131.72Z" transform="translate(-326 -974)" ref={closeLine2} /> <path id="closeline1" d="M476.22,1131.72a7.67,7.67,0,0,0,0,10.85l161.71,161.71a7.67,7.67,0,1,0,10.85-10.85L487.07,1131.72A7.67,7.67,0,0,0,476.22,1131.72Z" transform="translate(-326 -974)" ref={closeLine1} /> </g> </svg> </> ); }; export default MenuMorph;

Hi! My question is more for feedback purposes. I am creating a hamburger menu morph. Is there a better way to do this other than to create two different scenes on the timeline (the hamburger morphs into the x in menuMorph(), then the x morphs back into the hamburger in menuMorphReverse())? import React, { useRef, useEffect, useState } from "react"; import { gsap, Power3 } from "gsap"; import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; const MenuMorph = () => { const [show, setShow] = useState(false); let topLine = useRef(null); let middleLine = useRef(null); let bottomLine = useRef(null); let closeCircle = useRef(null); let closeLine2 = useRef(null); let closeLine1 = useRef(null); let master = gsap.timeline({ repeat: 0, paused: true, }); const menuMorph = () => { let tl = gsap.timeline(); tl.addLabel('start').to(topLine.current, 1, { morphSVG: { shape: closeCircle.current, shapeIndex: 7 }, ease: Power3.easeOut, }, 'start').to(middleLine.current, 1, { morphSVG: { shape: closeLine2.current, shapeIndex: 1 }, ease: Power3.easeOut, }, 'start').to(bottomLine.current, 1, { morphSVG: { shape: closeLine1.current, shapeIndex: 1 }, ease: Power3.easeOut, }, 'start'); return tl } const menuMorphReverse = () => { let tl = gsap.timeline(); tl.addLabel('start').to(topLine.current, 1, { morphSVG: { shape: topLine.current, shapeIndex: 7 }, ease: Power3.easeOut, }, 'start').to(middleLine.current, 1, { morphSVG: { shape: middleLine.current, shapeIndex: 1 }, ease: Power3.easeOut, }, 'start').to(bottomLine.current, 1, { morphSVG: { shape: bottomLine.current, shapeIndex: 1 }, ease: Power3.easeOut, }, 'start'); return tl } show ? master.add(menuMorph()).play() : master.add(menuMorphReverse()).play() const handleClick = () => { setShow((prevState) => { // console.log(prevState) return prevState ? false : true; }); }; return ( <svg id="menu_morph" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" onClick={handleClick} > <title>menuMorph</title> <g id="menu"> <g id="Menu-2" data-name="Menu"> <path id="topline" d="M382.05,1109.73H743a12,12,0,0,0,0-24.06H382.05a12,12,0,0,0,0,24.06Z" transform="translate(-326 -974)" ref={topLine} /> <path id="middleline" d="M743,1206H382.05a12,12,0,0,0,0,24.06H743a12,12,0,1,0,0-24.06Z" transform="translate(-326 -974)" ref={middleLine} /> <path id="bottomline" d="M743,1326.27H382.05a12,12,0,0,0,0,24.06H743a12,12,0,0,0,0-24.06Z" transform="translate(-326 -974)" ref={bottomLine} /> </g> </g> <g id="close"> <path id="closecirlce" d="M562.5,1029.5c-103.94,0-188.5,84.56-188.5,188.5s84.56,188.5,188.5,188.5a187.61,187.61,0,0,0,130.63-52.6,7.67,7.67,0,1,0-10.64-11.06,172.31,172.31,0,0,1-120,48.32c-95.48,0-173.16-77.68-173.16-173.16S467,1044.84,562.5,1044.84,735.66,1122.52,735.66,1218a172.52,172.52,0,0,1-11.6,62.44,7.67,7.67,0,1,0,14.31,5.54A187.72,187.72,0,0,0,751,1218C751,1114.06,666.44,1029.5,562.5,1029.5Z" transform="translate(-326 -974)" ref={closeCircle} /> <path id="closeline2" d="M648.78,1131.72a7.67,7.67,0,0,0-10.85,0L476.22,1293.43a7.67,7.67,0,1,0,10.85,10.85l161.71-161.71A7.67,7.67,0,0,0,648.78,1131.72Z" transform="translate(-326 -974)" ref={closeLine2} /> <path id="closeline1" d="M476.22,1131.72a7.67,7.67,0,0,0,0,10.85l161.71,161.71a7.67,7.67,0,1,0,10.85-10.85L487.07,1131.72A7.67,7.67,0,0,0,476.22,1131.72Z" transform="translate(-326 -974)" ref={closeLine1} /> </g> </svg> ); }; export default MenuMorph;

That was it! And it was such an easy fix. I can't believe it! Thank you.

Here's a codepen example where I got it working by using the id on the svg tag. Why can't I rotate a group within an svg? That is my big question. Also, when I try to change it to transformOrigin: "bottom right", it doesn't change the location of rotation. https://codepen.io/blumaa/pen/LYprPWq?editors=1010

Hi! Thank you! This is sort of a fix for it. I don't understand why it was necessary to wrap the svg with divs and use the styling to position it though. Why can't I just transformOrigin on the group inside the div?

Can someone help me figure out how to change the transformOrigin in this react component? Right now the moon is spinning from the upper left and I'd like to have it draggable spin from the center. https://codesandbox.io/s/amazing-poitras-fe5uw?fontsize=14&hidenavigation=1&theme=dark Thank you!

This totally worked! I just had to register the plugin. Thank you!

I'm trying to figure out how to create a draggable circle (to create a dial) but I keep getting this error: TypeError: _toArray is not a function I'm importing draggable correctly. I use a ref on the group of paths. I can console log the element in my UseEffect. But when I add it to Draggable.create(element) I get the above error. I'm not sure what I'm doing wrong. Any help would be appreciated! Thank you!

Wonderful! Thank you.

Yes! Thank you! It is working. So basically I just need to convert all shapes in codepen and then copy them into my react component, then add the refs.. I made a slight modification for the ref to make it work. I'll post the code here. import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; gsap.registerPlugin(MorphSVGPlugin); const MorphLetters = () => { let start = useRef(null); let end = useRef(null); console.log("start", start); useEffect(() => { console.log("start", start); console.log("end", end); gsap.to(start, {duration: 1, morphSVG:end}); }); return ( <> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125 1125" > <title>developer</title> <defs> <path ref={el=> end = el} stroke-width="18" stroke-miterlimit="10" stroke="#515151" fill="none" id="end" d="M562.5,71.54 C604.87333,194.14667 647.24667,316.75333 689.62,439.36 819.32,441.77333 949.02,444.18667 1078.72,446.6 975.21,524.78667 871.7,602.97333 768.19,681.16 805.97333,805.26 843.75667,929.36 881.54,1053.46 775.19333,979.17667 668.84667,904.89333 562.5,830.61 456.15333,904.89333 349.80667,979.17667 243.46,1053.46 281.24333,929.36 319.02667,805.26 356.81,681.16 253.3,602.97333 149.79,524.78667 46.28,446.6 175.98,444.18667 305.68,441.77333 435.38,439.36 477.75333,316.75333 520.12667,194.14667 562.5,71.54 562.5,71.54 562.5,71.54 562.5,71.54 z" ></path> </defs> <path ref={el=>start=el} fill="#a39274" id="start" d="M1125,0 C1125,375 1125,750 1125,1125 750,1125 375,1125 0,1125 0,750 0,375 0,0 375,0 750,0 1125,0 z" ></path> </svg> </> ); }; export default MorphLetters; I very much appreciate it.

Yes. That part makes sense. I should clarify that I can make this all work in codepen. It's when I try it in the react environment that things get tricky. I guess I'm not sure how to convert the svg to path while I use refs for each of the polygon and rect nodes. As in what I'm doing in my screenshot above. Thanks!

Thank you! This is super helpful. Can you advise about how to convert it to paths before instead of at runtime? I'm not sure I understand how to do that and also keep the refs. Thanks again!

Hello, I'm trying to figure out how to use MorphSVG with React. When I do a gsap.from(start, 2, {x:400}) for a regular animation, everything works fine. But when I try to morph the square into the start, nothing happens. Any help is appreciated! I should mention that I have installed the club GreenSock packages correctly. This is what my component looks like: import React, { useRef, useEffect } from "react"; import gsap, { TweenMax, Power4 } from "gsap"; import MorphSVGPlugin from "gsap/MorphSVGPlugin"; gsap.registerPlugin(MorphSVGPlugin); const MorphShape = () => { let start = useRef(null); let end = useRef(null); console.log("start", start); useEffect(() => { console.log("start", start); console.log("end", end); // gsap.from(start, 3, {x: 400}) gsap.to(start, {duration: 1, morphSVG:end}); }); return ( <> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125 1125" > <title>developer</title> <rect id="start" width="1125" height="1125" fill="#a39274" ref={(el) => (start = el)} /> <polygon id="end" points="562.5 71.54 689.62 439.36 1078.72 446.6 768.19 681.16 881.54 1053.46 562.5 830.61 243.46 1053.46 356.81 681.16 46.28 446.6 435.38 439.36 562.5 71.54" fill="none" stroke="#515151" stroke-miterlimit="10" stroke-width="18" ref={(el) => (end = el)} /> </svg> </> ); }; export default MorphShape;