Jump to content
Search Community

Combine MotionPath with DrawSVG

7linternational test
Moderator Tag

Recommended Posts

I think I've somewhat did it with
 

var line1 = MotionPathPlugin.convertToPath("#line1", false);
  
  gsap.to("#dot", {
  duration: 2, 
  ease: "linear",
  motionPath:{
    path: line1[0],
    align: "#line1",
    //autoRotate: true,
    alignOrigin: [0.5, 0.5],
    offsetX: 138,
    offsetY: 0
  }
});


but it requires offsetX and Y, I thought that it would align out of the box, is there something wrong with what I'm doing?

Link to comment
Share on other sites

That's definitely easier with a full path rather than individual lines. That being said, you can animate the target between motion paths fairly easily. I wrote tutorials about how to do it with handwriting, but it would apply to any set of paths.

 

Maybe you'll find some helpful info in the tuts.

https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/animated-handwriting-effect-part-2/

 

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

 

Happy tweening.

:)

 

  • Like 3
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.
×
×
  • Create New...