Jump to content
Search Community

SVG line showing before animation starts with DrawSVGPlugin

Ernesto Ianuario test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

 

  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...