Jump to content
GreenSock

kkjvr

Motion Path add Trailing Path

Recommended Posts

I only have been using the core GSAP and I have came across the MotionPathPlugin and tried it. I am using VueJS and I want to put a trailing path to my object but I am failing to do. can someone help me? 

See the Pen GRjNBYj by kkvjr (@kkvjr) on CodePen

Link to comment
Share on other sites

Hi @kkjvr :)

 

Welcome to the forum.

 

The best way to animate a dashed path is by using a mask. You then animate the masked stroke with the DrawSVG plugin.

 

I have a whole tutorial about animating dashed paths here:

https://www.motiontricks.com/svg-dashed-line-animation/

 

This is one of the demos from the tutorial.

See the Pen c07761a17f94434f1229e11e798f1a3d by PointC (@PointC) on CodePen

 

Hopefully that gets you started. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

You need to load the DrawSVG plugin and you'll probably want both tweens on a timeline. Using the position parameter of 0 will allow them both to start at the same time.

See the Pen 312f41ae2d7af6d939167b5fc756347a by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

ow its under the club plugins. thank you by the way!

Link to comment
Share on other sites

10 minutes ago, kkjvr said:

ow its under the club plugins

Yep - it's a Club plugin.

https://greensock.com/club/

 

All the bonus plugins from Club GreenSock are available to try for free on CodePen. When you add a script, just start typing the name of the one you want and it should pop right up for you. Happy tweening.

:)

 

  • 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.
×