create-react-app registerPlugin drawSVG

[trtg2xv]

hi,i using gsap3 in create-react-app  But ，I hava some problems;  

I don't know why ' drawSvg ' not working;

I   'import  DrawSVGPlugin  from "gsap/all"  and register it,but console has warning

import  DrawSVGPlugin  from "gsap/all";

  useEffect(() => {

    gsap.registerPlugin(DrawSVGPlugin);

    console.log("drawSVG");

    let t1 = gsap.context(() => {

      gsap.from('#Line1',{

        drawSVG:"0%",

        duration:3

      }

      )

    });

    return () => t1.revert();

  }, []);

[Cassie]

Hi there! Draw SVG is a paid benefit of Club GreenSock membership, I don't see that associated with your account so that may be the first hurdle.

The other issue is how you're importing DrawSVG - this is correct
 

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

You can see more about installation here -> https://greensock.com/docs/v3/Installation?checked=core,drawSVG#modules

We have a starter template here too, it uses React and our gsap-trial package. 💚 By using the trial package you can use the club plugins for free on stackblitz, codepen and codesandbox

https://stackblitz.com/edit/react-iqmjfx?file=src%2FApp.js

We also have a React guide here.
 

Hope these links help and good luck with your project!

[trtg2xv]

Thank you for your reply, this reply is very helpful, is there a free version of the plugin for drawing SVG animation?

[GreenSock]

1 hour ago, trtg2xv said:

Thank you for your reply, this reply is very helpful, is there a free version of the plugin for drawing SVG animation?

No, but you could animate the CSS strokeDashoffset property. It’s not nearly as easy or compatible, but in many cases it works. DrawSVGPlugin solves a lot of cross-browser issues and greatly simplifies things. So if you want to avoid getting the proper Club GreenSock membership, you could go the manual route but please don’t expect us to walk you through all that. Keep in mind that the only way we can do what we do is because of Club GreenSock and our supporters there. Bonus plugins like DrawSVG are our way of saying “thanks” to those who support our efforts. 

 

Good luck to you!