SVG loading logo animation

[RobbieC]

As some of you guys know i'm new to GSAP and today I spent some time and created this SVG logo animation for a loading screen. I'm pretty stoked how it has turned out so far. But I can't figure out if i'm doing it all correctly, mainly the slide down and fade out. I'm trying to get the fade out on the svg to start at the same time as the slide down starts so that by the time the slide down is complete the fade out will be done as well.

 

Any help would be greatly appreciated, specially if im doing it all wrong. 

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

[PointC]

It's looking good.

 

Sounds like you're looking for the position parameter. Check this out:

 

Happy tweening.

 

[RobbieC]

Thank you, that's just what I was looking for!

 

By the way, on my fade out:

.fromTo(".loader_wrapper", {autoAlpha: 1}, {autoAlpha: 0, duration: 1}, "fadeslideout+=0.5")

is it necessary to add "display:none", to make sure the wrapper stays hidden?

.fromTo(".loader_wrapper", {autoAlpha: 1}, {autoAlpha: 0, display: "none", duration: 1}, "fadeslideout+=0.5")

 

[ZachSaucier]

2 hours ago, RobbieC said:

is it necessary to add "display:none", to make sure the wrapper stays hidden?

Most likely no. The opacity (which autoAlpha will set) won't change unless you tell it to some other time. Animating to an autoAlpha of 0 will also set visibility: "hidden" at the end so you don't have anything to worry about in terms of it showing up visually. 

[RobbieC]

Makes sense, thank you!

 

I did run into a little issue, I placed my codepen code into my project on my localhost and when the page first loads the SVG image is visible for a split second before the drawSVG starts.

 

On my codepen I changed the background color to gray to see if the SVG was visible at the beginning and its not but just right before the white fill starts you can see it fills it black before the white fill starts. The SVG I made in illustrator, the font color is black with a white outline could this be?

[ZachSaucier]

See this post to see how to get rid of those flashes of unstyled content (FOUC):

 

[RobbieC]

Thank you! I took me a few minutes to figure out which element to add it to. I put it on the SVG glass and added another TL for the drawSVG starts. It seems to be working, did i do it correctly? Also i'm guessing I need to go back into Illustrator and change the font fill color from black to white or would transparent work better (for the black fill that flickers before the white fill starts)?

[ZachSaucier]

4 minutes ago, RobbieC said:

i'm guessing I need to go back into Illustrator and change the font fill color from black to white or would transparent work better (for the black fill that flickers before the white fill starts)?

That, or you could just edit the SVG by hand, or set it in the JS before the timeline plays. Whatever  

[RobbieC]

I'm still a newbie LOL, i'll just edit the SVG!