SVG logo animation w/ DrawSVG + Stagger

[RobbieC]

I wanted to post this animation I created last night for two reason.

First to help anyone else out there that are trying to create any type of SVG logo animation. I did a lot of searching in the forums for DrawSVG, animate svg fill, etc. So I just wanted to add a little to help anyone out in the future.

 

Second, I wanna get some feedback from you guys since I am new and maybe could optimize my code better or something.

 

Hope you guys like it and it helps at least one person out in the future!

See the Pen pojZBVM by robbiecren07 (@robbiecren07) on CodePen

[ZachSaucier]

Good work! The only real improvement I have is that you don't need new in front of gsap.timeline(). Besides that the only complaint I have are stylistic things related to your code formatting  

[OSUblake]

7 minutes ago, ZachSaucier said:

Besides that the only complaint I have are stylistic things related to your code formatting  

 

What would you suggest?

 

[ZachSaucier]

2 minutes ago, OSUblake said:

What would you suggest?

Tidying the HTML for one. I try to keep the properties in tweens in the same relative order when they're in chains like that (for example putting the eases at the beginning or end of each vars) to me it easier to find properties later. I also tend to put closing }) on new lines. The IDs also aren't used so I'd probably not include them.

[RobbieC]

7 minutes ago, ZachSaucier said:

you don't need new in front of gsap.timeline()

🤦‍♂️ How did I miss that! It’s right there in plain English on the GSAP v3 migration docs!

 

When you say stylistic, you mean the indents and spacing?  If so that’s just case I typed it in the regular editor view and let codepen control the tabs.

[RobbieC]

2 minutes ago, ZachSaucier said:

The IDs also aren't used so I'd probably not include them

Which IDs? Like “.logo-outline” - I just did that for me. The IDs in the JS are for the DevTools, which this is the first time I’ve used the DevTools.

[PointC]

Looking good Robbie. Thanks for sharing. 👍

[RobbieC]

27 minutes ago, ZachSaucier said:

for example putting the eases at the beginning or end of each vars

You're right,  I should of done a once over.

 

When I get back to the computer tonight I'm going to clean/correct it. Plus im going to add the transition out of the "intro" to the "page". On my project this is a fixed full screen intro, which fades out and then fades in the page/content and locks the scrollbar during the intro so they cant scroll down and actually see the page content. I'll explain that a little more once add it to the codepen.

[PointC]

Here's my list for getting a project out the door.

1. Does all the code work as expected?
2. Did I keep the code DRY (or really close to it)?
3. Did I leave enough comments in there so I'm not thoroughly confused when I look at it again in 6 months?
4. Is all the code pretty and perfect?

When I first started hanging around the forum I was thrilled if #1 was a yes. Rejoice! It all works!  🎉It's 500 lines of code but the div actually moved. Hooray!

 

After getting a bit better and confident I kinda knew what I was doing, I focused on #2. If I could get the loops and functions doing most of the work, that was a good day.

 

I'm terrible at #3, but getting better. I'll open a project a year later and wonder what is this craigsAwesomeVariable thing? 🤷‍♂️

 

#4 is if and only if I have time. I work with a lot of SVGs so I do clean up AI exports, but a lot of that comes down to proper setup in your vector software. Zach's thoughts about order of properties in your vars is a good thing. You'll probably develop that skill naturally as you progress. Everyone has their own style.

 

Bottom line: don't take it all too seriously especially while you're learning. Make it work. Keep it mostly DRY. Throw in some comments. But above all, have fun with it.

 

Happy tweening.

 

[RobbieC]

So I want to start with, thank you guys for your comments/feedback it really is helpful. I will admit I should have waited to make the post till I did do some clean up. I was just so stoked that I actually created something that works, I was just in a hurry to share it!

 

That being said, I created this in codepen first then I moved into my project and from there I had started to clean it up and make some tweaks. I should have waited and brought the finished code over into the codepen then posted it.

 

@ZachSaucier was right though, my html code was messy. I might not have gone back and removed some of the unused IDs if he didn't give me that feedback.

 

You also said:

4 hours ago, ZachSaucier said:

I also tend to put closing }) on new lines

I just made that change in the codepen cause it does make it easier to understand. But for me personally maybe its cause im new to GSAP and it makes it easy for me to understand and read if I keep it all on one line like so:

.fromTo(".stroke", {drawSVG: "50% 50%"}, {duration: 1.5, drawSVG: "0% 100%", stagger: {amount: 1}, ease: "circ.Out"})

But if I post that in Codepen it looks ugly and actually makes it harder to read. 

 

@PointC Your reply was literally on POINT! I'm a huge fan of your SVG animations and they have helped me alot, so thank you. I was actually planning on going back into Illustrator this weekend and making some small tweaks to the SVG, so that the code will be smaller (i.e. the stroke outline of the R, you can see it overlap the C, before the fill starts and once I saw it, its been bugging me ever since). 

 

Adding the comments is smart, specially since I want my codepen to be able to help someone else. Comments on for the project side I guess I keep telling myself "it's just going to get minified, whats the point" - but that doesn't mean I cant leave the comments in the original source file, so that's something I need to work on doing.

 

As for your #4, I would say I'm pretty good at keeping my HTML/CSS tiddy, my JS on the other hand not so much and I think that's more so cause I'm still learning JS and keeping some strings in a single line is easier for me to read/understand and then that minify thought creeps back into my head!

 

I made some of the above changes to the codepen already, I'll finish the rest it up tomorrow so that its cleaner/easier for the next person to read.

 

I will probably make a separate codepen that will have the intro animation plus the transition out, but ill post the codepen link in this post. 

 

Thanks again everyone!

[RobbieC]

So I cleaned up the SVG a little on the original pen and then I created a new pen to show how I'm doing my transition out, you can view it here:

See the Pen QWjZqrW by robbiecren07 (@robbiecren07) on CodePen

 

So on that pen, I lock the scrollbar so that the user can't scroll the page while the intro is playing and then it fades out the intro and fades in the rest of the page. Not sure if this is the best way, but it works for right now. What do you guys think?

 

Also I noticed that on my original codepen i'm using DevTools and there is a .5 sec delay in this tl:

tl.from(".svg-intro", {autoAlpha: 0, ease: "none",})

So when you press play at the start of the animation there is a .5 sec delay before the stroke animation starts but when I moved my code into my project the delay is not there anymore. I'm not using DevTools inside my project, which leads me to believe that DevTools is maybe what caused the delay?

 

I can replace the above code to this:

tl.from(".svg-intro", {duration: 0, autoAlpha: 0, ease: "none",})

Then the .5 sec delay is gone and the drawSVG stroke starts immediately.