Jump to content
Search Community

SVG Dashed Line Animation Troubles

ncanarelli test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

 

  • Like 4
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

+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!

 

giphy.gif

 

@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.

 

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