ELMNTL Posted June 15, 2021 Share Posted June 15, 2021 /* 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! See the Pen bGqOwMb by armandolopezjr (@armandolopezjr) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted June 15, 2021 Solution Share Posted June 15, 2021 Hi @ELMNTL Welcome to the forum. The easiest way to animate a dashed line is by using a mask. I have a tutorial on my training site about that technique. I think you'll find it helpful. https://www.motiontricks.com/svg-dashed-line-animation/ Happy tweening and welcome aboard. 3 Link to comment Share on other sites More sharing options...
ELMNTL Posted June 15, 2021 Author Share Posted June 15, 2021 Hello @PointC Thanks for the welcome and tutorial! I tried doing the mask and grouping them, but it didn't work. Here's the updated pen: Link to comment Share on other sites More sharing options...
PointC Posted June 15, 2021 Share Posted June 15, 2021 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. 5 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now