Jump to content
Search Community

Animate SVG Dash line from start to end

ELMNTL test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

/* NOTE: The codepen on the bottom is the first question. :) */

Hello, I'm a newbie in javascript and started using gsap, drawsvg and triggerscroll just last week. I'm trying to implement it in a project, but I can't make the dash animation work. So instead of just a line animating from start to end, I want it to be dashed on scroll.  I've attached an image on what it should look like.

My second question is, how about if it's multiple path? I tried using timeline but I can't make it work. Here's the codepen link: 

See the Pen dyvwdNr by armandolopezjr (@armandolopezjr) on CodePen



Thanks in advance! :)

dash.jpg

See the Pen bGqOwMb by armandolopezjr (@armandolopezjr) on CodePen

Link to comment
Share on other sites

You just have a typo. The defs is closed as </def> on line 8 in the html instead of </defs>. Since that wasn't closed correctly, everything was in the defs and therefore not rendered. Make that switch and you'll be good to go.

 

Happy tweening.

:)

 

  • Like 5
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...