SVG Dashed Line Animation Troubles

[ncanarelli]

I'm newer to working with SVG animations so I apologize in advanced if there is a straightforward answer to this. With a combination of utilizing Scrollmajic.js and GASP I was able to get the SVG to animate when the user scrolls to a specific position. The issue i'm running into is that the animation converts it from a dashed line to a solid stroke. I've done some research and found that using a mask would be the best way to accomplish this though I'm a bit lost on how to approach this method and would love some direction/help.

 

Thanks in advance!

 

Codepen Example

 

 

See the Pen wvaeLNa by ncanarelli (@ncanarelli) on CodePen.

[PointC]

Hi @ncanarelli 

 

Welcome to the forum. 

 

To use a mask, you can make a duplicate of the dashed path and drop it into <defs><mask> element and animate that instead of the actual path. I've forked your pen and made a quick adjustment to one of the SVGs to demonstrate this technique.

See the Pen vYOZoNo by PointC (@PointC) on CodePen.

 

Just some other notes. You're using a really old version of GSAP. I'd recommend upgrading to the latest version 3.2.2. You could also take a look at the drawSVG plugin for this type of animation.

It's part of the Club perks.

https://greensock.com/club/

 

I also wrote about dashed lines here:

Hopefully that helps.

 

Happy tweening.

 

[ncanarelli]

10 minutes ago, PointC said:

Hi @ncanarelli 

 

Welcome to the forum. 

 

To use a mask, you can make a duplicate of the dashed path and drop it into <defs><mask> element and animate that instead of the actual path. I've forked your pen and made a quick adjustment to one of the SVGs to demonstrate this technique.

 

 

 

Just some other notes. You're using a really old version of GSAP. I'd recommend upgrading to the latest version 3.2.2. You could also take a look at the drawSVG plugin for this type of animation.

It's part of the Club perks.

https://greensock.com/club/

 

I also wrote about dashed lines here:

Hopefully that helps.

 

Happy tweening.

 

 

Wow you're an absolute legend! This is exactly what I was looking for..

 

However, it appears that only the first two .svg-animation div's are triggered. When I continue to scroll the remaining are already displayed. Do you see any issues with my .each loop that would prevent this from initiating the way it's supposed to?

[ZachSaucier]

1 hour ago, ncanarelli said:

Do you see any issues with my .each loop that would prevent this from initiating the way it's supposed to?

Please make a minimal demo of the issue for us to check out  

[ncanarelli]

2 minutes ago, ZachSaucier said:

Please make a minimal demo of the issue for us to check out  

 

I've updated the original codepen to reflect what I am experiencing: 

See the Pen wvaeLNa by ncanarelli (@ncanarelli) on CodePen.

[ZachSaucier]

10 minutes ago, ncanarelli said:

I've updated the original codepen to reflect what I am experiencing

Generally when making new demos for a forum post like this you should use the "fork" button in the bottom right instead of the "save" button so that way old versions can be retained and the thread still makes sense to future readers

 

I'm guessing the issue is related to the duplicate IDs that you have. Notice that Craig's version doesn't have duplicate IDs because duplicate IDs are invalid.

[PointC]

Yep - since you're duplicating the SVG a bunch of times, you'll need to give each mask a unique name. Something like Mask1, Mask2 etc... will make it work correctly the way you have it coded right now.

 

[Shrug ¯\_(ツ)_/¯]

+1 ?

 

Forgive me, but I couldn't pass up the chance to agree with ...

 

2 hours ago, ncanarelli said:

Wow you're an absolute legend!

 

 

@PointC (and so many others) have sprinkled so much awesomeness within the forum. It's truly what makes this forum (and searching it) so endlessly awesome. So indeed welcome aboard the Greensock forums @ncanarelli.