Learn DrawSVG

[EVA CORPORATION]

While I have a break between projects, I wanted to figure out how to work DrawSVG.
I took a ready-made animation of the logo and based on it to implement animation only using gsap.
But I ran into two problems...
1) When I try to take the DrawSVGPlugin connection from the examples... CodePen requires Upgrade to Pro
2) I found a suitable example... but there is also an upgrade required to see the work of the example...

What to do? Is there any way to connect js in another way?

 

An example that seems to suit me, I found here

See the Pen 85df19ba523672229f92e5aa4ac675af by cassie-codes (@cassie-codes) on CodePen

 

I also attach an example of animation

 

And here is my attempt to make my own project

See the Pen pogorPV by eglit_m (@eglit_m) on CodePen

[Rodrigo]

Hi,

 

There shouldn't be any requirements from Codepen to use the GSAP bonus plugins there. The warning you are getting is that the codepen Cassie made is private and forking those is not possible for anyone, regardless of the account type they have in Codepen.

 

You can always use this starter template to use all the bonus plugins for free on codepen:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Also in this case it'd be better to not use filled or closed paths, but just single lines, like this:

See the Pen eYbQPYm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps getting you started.

Happy Tweening!

[EVA CORPORATION]

4 minutes ago, Rodrigo said:

You can always use this starter template to use all the bonus plugins for free on codepen:

Ah! Understood, thank you!

 

6 minutes ago, Rodrigo said:

Also in this case it'd be better to not use filled or closed paths, but just single lines, like this:

Yeah, it still turns out I need to draw every line. Okay, while I have time, I'll practice svg drawing.😅

Thanks!