Jump to content
Search Community

ReactJs and DrawSVGPlugin

janessa99 test
Moderator Tag

Recommended Posts

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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? 

 

 

Link to comment
Share on other sites

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...