Animate SVG Logo for a loading intro purpose (Draw SVG?)

[vitor z]

Hey guys, how is it going!? 😃

I'm still learning the GSAP basics with my first project using it, so i'm sorry if that's a dumb or frequent question.

 

I need to animate this svg logo for a loading intro just like the demo GIF. Is it possible? If yes, what's the best way or solution?

 

Besides, i just joined GSAP club to use Draw SVG (don't know if is the best tool for this purpose). 

Here's the website that i'm working on it: http://thelotusyang.com/manutencao/

 

I'm originally an art director, so the only code i'm kinda familiar is css & html. I have to admit that i'm always struggling with js logics.

Thanks in advance 😃

[akapowl]

 

Hey @vitor z

 

Depending on how exactly it is you want things to be animated, you don't need the DrawSVGPlugin (well, if you want to initially draw the stroke of the SVG,it comes in pretty handy) - nonetheless it is good to have it  

 

Depending on how your SVG is set up (pre-preparing the SVG is always key to something like this), you could get it done with a pretty simple timeline.

 

Here is an example, tweening in the stroke of the star first, then the fill of the star, and then with a staggered tween, the circles

 

See the Pen 1713e961cec95b480fcf123ac1b6526c by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

 

 

 

Edit:

And since you want this to run in a preloader-context, you could use GSAP's rich callback-system, to trigger whatever you need at whatever neccessary time. Here is an example where I split the fading in of the star and the circle-staggering into differnt timelines.

 

First, the star fades in - onComplete of that, the circlesTimeline starts playing.

 

onRepeat the circlesTimeline checks, if the variable contentIsLoaded (here for simulating the page-load-event - toggled after 10 seconds) is true. If it isn't, it keeps on repeating, If it is, it pauses (you could/should probably also kill it) and the initial fadeInTimeline is being reversed.

 

See the Pen 1c5aa2161864953023c0876a22470a05 by akapowl (@akapowl) on CodePen

 

 

[vitor z]

Thanks for your reply, Paul!

 

Cool! As you said, seems to me that the pre-preparing of the SVG is my big challenge now. 

So, if I already have this svg file is it possible to use it or do you have any tips or tools about how can i redraw it correctly?

 

Cheers! 😃

[akapowl]

 

22 minutes ago, vitor z said:

So, if I already have this svg file is it possible to use it or do you have any tips or tools about how can i redraw it correctly?

 

You'd first have to get the SVG's code and insert it into your HTML for being able to animate it.

I don't think animating it is possible, with how you are adding it in via an img-tag.

 

You could get the code of your SVG either from your SVG editor app, or via Jake Archibald's SVG-OMG, put it inside your HTML and give it a test-ride yourself. If you are asking for an SVG-Editor - InkScape is pretty solid for an OpenSource and free to use vector-editing tool.

 

 

 

What's actually important here with regards to the animation, more precisely to the staggering, is the order, in which your equivalents to my circles appear in your html, from bottom to top. First to be shown should be on top, last being on bottom in that order.

 

So if you wanted to do it like in my demo, that would probably be the only thing to consider and you probably won't have to re-draw anything. If you wanted to animate the draw of the stroke of your center SVG, it would also be important, where the stroke has its start- and endpoints - and here maybe a rework of the SVG would be neccessary.

 

Give it a try and see if it works out in your scenario  

 

[PointC]

In addition to @akapowl's good info, I've written quite a bit about preparing assets, using a background rectangle and changing your start and end points. My training site has a few articles which may help.

 

https://www.motiontricks.com/better-svg-exports-make-animations-easier/

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

https://www.motiontricks.com/use-background-rectangle-with-svg-exports/

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

Hopefully there will be some helpful info in there for you.

 

Happy tweening.

 

[akapowl]

Oh yeah, I wanted to add a part in my last reply, where I'd have asked if @PointC could correct me, if I was mistaken on anything, since he is the master of SVGs here and out there in the open -  but that sort of faded away 🙈

[vitor z]

Thanks for all the support, guys!

Now i see that i have much to learn!

 

See the Pen QWKydzL by vzanirato (@vzanirato) on CodePen

I've placed the svg code here in this pen to check possibilities. But after reading @PointC article about SVG exports i see that i need to rewrite to animate it properly, right?

 

Cheers 😃

[akapowl]

 

Yeah, that looks a bit wild, you'd have to format it a bit, to get it working.

Either in an editor - probably the easiest - or you could do it by hand.

 

A basic rule to follow in a case like this: 

When one path seems to contain multiple elements, everywhere you see a capital M inside that path, this is where the path of a new element starts.

 

I handled that for you, just to show it's possible to adjust it without a vector-editor app.

Also, I removed the fill that was set inline on all those paths, added some classes to the paths and some CSS.

 

And here, instead of tweening on the fill- and path- colors, the tweens are on the strokeOpacity and fillOpacity.

You see, that depending on the exact scenario there are multiple variations of how you can get where you want.

 

See the Pen c59a1a3fe9128b3b13efdc86be81daf7 by akapowl (@akapowl) on CodePen

 

 

Happy tweening  

 

 

[PointC]

Nice work @akapowl. I award 10 SVG Samurai Points. ⚔️

[vitor z]

@akapowl this is beautiful ❤️

Thank you very much!

 

I'm starting to understand clearly the whole process.

Thanks masters!