GSAP + React: Draw path circle

[Marina Gallardo]

Hi, I'm starting at GSAP and I'm trying to draw a circle path with drawSVG using useRef() hook, but I don't know what I am doing wrong.

 

This is a resume of my actual code, any idea? I am using GSAP 2.0. It doesn't react at all...

 

import { TimelineLite, TweenMax, DrawSVGPlugin } from 'gsap/all';

 

let circle = useRef(null);

 

let tl = new TimelineLite();

 

useEffect(() => {

tl.from(circle, 2, { drawSVG: 0 });

});

 

<circle

ref={(el) => (circle = el)}

fill="none"

id="Oval"

strokeWidth="1"

stroke="#FFFFFF"

cx="48"

cy="47"

r="44"

></circle>

[Marina Gallardo]

OK.... I was looking at node_modules and I see there is no drawSVG plugin 😕

 

 

import TweenLite, { _gsScope, TweenPlugin, Ease, Power0, Power1, Power2, Power3, Power4, Linear } from "./TweenLite.js";

import TimelineLite from "./TimelineLite.js";

import TimelineMax from "./TimelineMax.js";

import TweenMax from "./TweenMax.js";

import CSSPlugin from "./CSSPlugin.js";

import AttrPlugin from "./AttrPlugin.js";

import RoundPropsPlugin from "./RoundPropsPlugin.js";

import DirectionalRotationPlugin from "./DirectionalRotationPlugin.js";

import BezierPlugin from "./BezierPlugin.js";

import { Back, Elastic, Bounce, RoughEase, SlowMo, SteppedEase, Circ, Expo, Sine, ExpoScaleEase } from "./EasePack.js";

 

export { TweenMax as default };

export { TweenLite, TweenMax, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, RoundPropsPlugin, DirectionalRotationPlugin, TweenPlugin, Ease, Power0, Power1, Power2, Power3, Power4, Linear, Back, Elastic, Bounce, RoughEase, SlowMo, SteppedEase, Circ, Expo, Sine, ExpoScaleEase, _gsScope };

[elegantseagulls]

Hi @Marina Gallardo

 

The DrawSVG plugin is a Club GreenSock membership benefit and thus not available via the public npm download (there are many other reasons to become a member too!).

 

You can learn more here: https://greensock.com/club/

 

Also, to be noted: GSAP v3 and its plugins work much better with react than 2.X and will give you a smaller package size.

 

Cheers!

Ryan

 

[Marina Gallardo]

Thank you @elegantseagulls, I've changed to GSAP v3

 

OK, it's part of the Club and not available through npm, great. I made the trick with native CSS keyframes, but if I need something more complex and recursive I'll become membership for sure.

 

I'm using Timeline and I'm very happy with results ❤️

 

Cheers and thank you for the response!

[elegantseagulls]

@Marina Gallardo,

 

Glad you got your animation sorted out!

 

Just for clarity, you can also use the Club bonus files via NPM, but it's a manually installed package. Check out the install helper for more info, here: https://greensock.com/docs/v3/Installation#modules