SVG line showing before animation starts with DrawSVGPlugin

[Ernesto Ianuario 2 Likes (Newbie)]

Hello everyone, I am experiencing a small issue with an svg I am trying to animate. Basically before the animation starts, inner lines are showing for a sec, although, this doesn't happen with circles or paths.

Am I missing something?

Thanks in advance for your help!

 

Ernesto

See the Pen abRjMdd by yano1978 (@yano1978) on CodePen

[PointC 14,466 Likes (Superhero)]

Just a bit of FOUC. This should help.

Happy tweening and thanks for being a club member.

[Ernesto Ianuario 2 Likes (Newbie)]

Hi PointC and thanks for the quick answer

I tried to had the visibility: hidden; to the class I am using to animate svg paths, circles and lines. I have wrapped my animation with an init() function as per the example and trigger it on window load event, but it doesn't seem to work? I still can see that flickering on the line inner elements 🤔

I have updated the demo, any thoughts?

Cheers,

 

Ernesto

[Ernesto Ianuario 2 Likes (Newbie)]

Nevermind, I just found out the issue, I was starting with the wrong percentage on the drawSVG

[PointC 14,466 Likes (Superhero)]

Glad you got it sorted.  

 

Just FYI - I think there were two issues. One was the FOUC. The other was starting the lines at "50% 50%". The former is easily fixed with a quick autoAlpha. The latter may not be so obvious. You were seeing the "dots"  of each line at 50/50 because the stroke-linecap is set to round. If you need to start at 50/50 like that, you need simply add a quick scale tween before the stroke animates. Something like this:

See the Pen e9a42d9c21dac238ab76c0bd4d36e524 by PointC (@PointC) on CodePen

 

Hopefully that makes sense. Happy tweening and thanks again for being a Club member.

 

[Ernesto Ianuario 2 Likes (Newbie)]

It does indeed make sense, tbh, I don't even remember why I was using the 50/50 in the first place, and actually the FOUC wasn't even an issue since I am triggering that animation with scrollTrigger 😅

If you check my demo now it is quite simplified and it's just what I needed 😜

Many thanks again!

 

Ernesto