Issue with GSAP DrawSVGPlugin and Timeline

[nik314]

Trying to use the DrawSVGPlugin and the animation stops half way through the whole logo I have. This is through react.js. Any advice?

See the Pen jOQBbGz by Nikhil-Kharbanda (@Nikhil-Kharbanda) on CodePen

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

 

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

 

We strongly recommend reading the React information we've put together at https://greensock.com/react

 

Happy tweening!

[mvaneijgen]

Hi @nik314 welcome to the forum! 

 

There are several issues with your setup. First your pen didn't work at all, there is ways to get React in Codepen, but you can also use our StackBlitz template React.

 

Next I had to open your SVG in a vector editor to get to see what its doing on and the S seems to be upside down and was 4 times as big as the viewbox it was in, so it would never look right. Also DrawSVG draws the stroke of a shape, but your shape doesn't have a stroke it has a fill that looks like a really small line, but that is not the same. (see in the demo that every line gets drawn twice) The shape has to be redrawn in a design program to manually convert the path to a line.

 

My skills don't lay in React, so to make sense of it all I had to remove everything to get something on the screen, but above comment has you covered  with how to use GSAP with React. Hope it helps and happy tweening! 

 

See the Pen zYMZogJ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen