Motion Path add Trailing Path

[kkjvr]

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

[PointC]

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.

 

[kkjvr]

I have tried your solution but I can't still replicate the function I wanted to perform

[PointC]

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.

 

[kkjvr]

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

[PointC]

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.