Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pils

Start "removing" DrawSVG line while drawing

Recommended Posts

Wow, this title must make sense. Hopefully the Codepen helps making this clear.

 

So i have this path that i draw with DrawSVG, and it's "removed" after the whole line is drawn. Now i want the remove-effect happening while the line is still drawing on the other end. Lowering the delay on the remove-effect is not working so i think i'm going about this the wrong way. How should i do this?

See the Pen XWbXBQa by luffyy (@luffyy) on CodePen

Share this post


Link to post
Share on other sites
1 hour ago, pils said:

i want the remove-effect happening while the line is still drawing on the other end

 

Have a look at the following thread and article about chasing lines by @PointC

 

https://greensock.com/forums/topic/19030-how-to-create-seamless-loop-of-svg-rect/
https://codepen.io/PointC/post/seamless-loop-svg-stroke-animations

  • Like 3

Share this post


Link to post
Share on other sites

Hey pils and welcome!

 

In addition to Shrug's suggestion, you can play around with different drawSVG values to get the type of effect that you're going for:

See the Pen RwPGNwy?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

Wow, finally had some time to play around with this again. And indeed it seems playing around with the values will get the job done. It's not perfect yet but i will get there. Thanks for the help!

 

See the Pen GRJjgrw by luffyy (@luffyy) on CodePen

  • Like 2

Share this post


Link to post
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.

×