Jump to content


Animating SVG Stroke-DashArray

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,


I'm not too sure if I've simply been staring at this too long or if I'm just having one of those off days where simple math decides it's gonna kick my teeth in.


I'm trying to animate the stroke-dasharray of an svg path with multiple dashes "chasing" one another through the path --similar to christmas lights that chase one another in a sequence. I've roughly figured out what I need to do here, but I can't seem to figure out a way to address a second and third dash to enter in.


Basically, I need to start one, and then continuously check to see if the current dash(es) have animated far enough to start entering in the subsequent dash and similarly I think I'll need to check the same "offsets" when it reaches the end of the line.


Anyone feel like taking a stab at a sane approach for this? If even just high level of how I might store some "mock" variables to watch in order to make the process easier, etc. As always any help is greatly appreciated!


P.S. - A side note is I'm not sure why the ease isn't working on the "chase" (it's set to Bounce atm for ease of visually seeing if the ease is being picked up)

Link to comment
Share on other sites

Well that's the idea more or less, but I only want 3 dashes to run through the path. Does that make sense? This is why I'm using dash array instead of dash offset.

Link to comment
Share on other sites

First, thanks for the assistance.


That's still using dashoffset though, which is going to offset the entire path with dashes which is why dasharray is needed. I've been trying to check lengths of current dashes in the drawChase method (I won't share the fiddles until it's more sane) but still feel like I may could approach this another way with some sort of mock data that i can watch in the drawChase method and build the dasharray based on it.

Link to comment
Share on other sites

This is pretty close to with what I'm trying to accomplish. Thanks Carl.


Looks like my Club membership has expired so DrawSVG Plugin won't help me atm :x but creating the necessary strings shouldn't be tough.


The methodology you took of creating the timeline should prove resourceful, yet I need to perform the animation on only one path, as creating multiple path nodes isn't an option with the constraints I've been given unfortunately, which was why I thought of creating more "mock" data to conditionally check against.


For a little clarity to what this use case is for (and help understand a little better) this would be something of a "trend line" and if the line ended in a upward slope this effect would be added to visually show the user the trend is going up.


Again, appreciate all the feedback guys!

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.