ReactJs and DrawSVGPlugin

[janessa99]

Hi!

 

I am trying to draw a text, but when I'm using the useRef hook the animation acts weird. Is their someone with experience using React Hooks and gsap? Or who already came across a similar problem?

 

 

See the Pen wvMaZBv?editors=1111 by janessa99 (@janessa99) on CodePen.

[Rodrigo]

Hi,

 

The problem is that you're using the ref attribute in the main <svg> tag and not the <path> one, so GSAP it's doing the best it can to actually animate that (which doesn't look quite good, right? ).

 

This seems to work as expected:

In the JSX

<svg  width="260" height="200" viewBox="0 0 254.73 199.11">
  <path
	ref={text02}
    id="text-02"
    class="text-02"
	d="M32.5,22.5v2.7a5.41,5.41,0,0,1-3.09,1.08c-2.59,0-4.1-1.41-4.1-4.83V17H18.65C17.17,22.68,13,26.28,6.91,26.28V23.69c4.72,0,7.6-2.7,8.82-6.66H12v-2.6h4.36A19.83,19.83,0,0,0,16.45,12c0-4.75-2-9.36-7.38-9.36-3,0-5.9,2.05-5.9,5.29A5.12,5.12,0,0,0,5.08,11.7l-1.8,2.05A7.59,7.59,0,0,1,.36,7.88C.36,3.2,4.64,0,9.07,0c6.34,0,10.19,4.75,10.19,12a18.06,18.06,0,0,1-.15,2.48h6.2V.4h2.77V21.45c0,1.3.5,2.24,1.9,2.24A3.35,3.35,0,0,0,32.5,22.5Z"
  />
  <path
    ref={text03}
    class="text-02"
    d="M34.92,6.23a2,2,0,1,1,4,0,2,2,0,0,1-2,2A2,2,0,0,1,34.92,6.23Zm4.21,20.05a3.66,3.66,0,0,1-3.53-3.93v-9.1h2.6V22.1a1.67,1.67,0,0,0,1.72,1.8,2.58,2.58,0,0,0,1.87-.72v2.34A4.45,4.45,0,0,1,39.13,26.28Z"
  />
</svg>

In the useEffect() hook

React.useEffect(() => {
  tl.fromTo(".text-01", {
    drawSVG: "0"
  }, {
    duration: 1,
    drawSVG: "100%"
  });
  tl.fromTo( text02.current, {
    drawSVG: "0"
  }, {
    duration: 1,
    drawSVG: "100%"
  });
  tl.fromTo(text03.current, {
    drawSVG: "0"
  }, {
    duration: 1,
    drawSVG: "100%"
  },1);
}, []);

Finally there is no need to pass the GSAP timeline instance to the hook, since that will run when the instance is updated which is not actually part of the component's state. Like that the animation is created when the component is actually mounted.

 

Happy Tweening!!!

[janessa99]

Hi!,

 

Thanks for your reply.

 

The SVG I'm using in my project is a bit more complex than the one in codepen. The SVG i'm using has 29 paths. I tried to loop over the array, but sadly this results in only the last path being animated. Is there any way to make this more dynamic? 

 

 

[Rodrigo]

You could create an array with the paths' d attribute's strings, like this:

const myPaths = [
  {"d": "the full string here"},
  {"d": "the full string here"},
];

Then map through that array in the render method:

<svg>
  {
    myPaths.map((path, index) => {
  	  return <path key={`path-${index}`} d={path.d} ref={e => myPathsArray[index] = e} />
    })
  }
</svg>

You create an array in your component to store the paths called myPathsArray and you can reference that to create your animations.

 

Here you can see a live sample that follows a similar pattern, is not exactly the same thing but hopefully is enough to get you started:

 

https://stackblitz.com/edit/gsap-react-multiple-elements?file=multiple-elements.js

 

Happy Tweening!!!