kkjvr Posted December 11, 2020 Share Posted December 11, 2020 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 More sharing options...
PointC Posted December 11, 2020 Share Posted December 11, 2020 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. 3 Link to comment Share on other sites More sharing options...
kkjvr Posted December 11, 2020 Author Share Posted December 11, 2020 I have tried your solution but I can't still replicate the function I wanted to perform Link to comment Share on other sites More sharing options...
PointC Posted December 11, 2020 Share Posted December 11, 2020 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. 2 Link to comment Share on other sites More sharing options...
kkjvr Posted December 11, 2020 Author Share Posted December 11, 2020 ow its under the club plugins. thank you by the way! Link to comment Share on other sites More sharing options...
PointC Posted December 11, 2020 Share Posted December 11, 2020 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. 2 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