Jump to content
GreenSock

7linternational

Combine MotionPath with DrawSVG

Recommended Posts

I'm trying to combine MotionPath with DrawSVG in the sense that I have a div that I want it to be placed on the tip where the svg path is drawing (like the div is drawing the lines. Is this possible? thanks in advance!

See the Pen OPNOgM by netgfx (@netgfx) on CodePen

Link to comment
Share on other sites

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

@mikel Thanks for the help, one more thing if you don't mind, is there a way to control the pace of the animation using mouse wheel scroll? I believe gsap recently launched a new plugin but not sure if it can be combined with DrawSVG.

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