how do I use drawsvgplugins in codesandbox with react?

[blumaa@gmail.com]

Hi everyone,

how do I use drawsvgplugins in codesandbox with react?

 

It works when I import it in my local project but I don't know how to add the dependency in codesandbox and import it. Do I use a script tag? Here's my project:

https://codesandbox.io/s/x-ion-gmbh-logo-45giy?file=/public/index.html

 

Thanks!

[OSUblake]

I already answered this. This links have been updated to work with codesandbox.

 

[blumaa@gmail.com]

I knew you had answered it but I went back and tried it with DrawSVG and it's not working in codesandbox.. Am I doing something wrong?

 

I put this in my  codesandbox linked above in the html body:     <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>

[OSUblake]

You need to register the plugin.

[blumaa@gmail.com]

Sorry.. still having trouble with this. How do I import and register the DrawSVGPlugin correctly?

 

Is this somewhere in the installation docs?

 

[OSUblake]

You can't import from a script tag. Just register the plugin. 

https://codesandbox.io/s/x-ion-gmbh-logo-po9q2?file=/src/Logo.js

 

You should probably read up on the migration guide. You're using lots of deprecated syntax.

 

Duration goes inside the vars object now. Stagger is a property. And eases are just strings. No need to import them.

tl.to(
  streak,
  {
    duration: 0.01,
    opacity: 0,
    ease: "back",
    stagger: -0.02
  }
);

 

[blumaa@gmail.com]

Oh wow. I am uses a lot of deprecated syntax. Thanks for pointing that out!

 

Everything works now. I appreciate the help!