Jump to content
Search Community

MorphSVG plugin and pathDataToBezier help

Blake

By Blake
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Blake

Blake

Posted
Posted

Hey there, Fellow GSAP Jedis! I'm having a bit of trouble getting my plane svg to follow a path I made. Any help is greatly appreciated.

 

Best,
Blake

See the Pen XxLJeg by Techture (@Techture) on CodePen.

PointC

PointC

Posted
Posted

Hi @Blake :)

 

The morph plugin wasn't loading and you had a really old version of TweenMax. You'd also want to align the #plane group to the path.

  

var motionPath = MorphSVGPlugin.pathDataToBezier("#dotted-line-path", {align:"#plane"});

 

 

See the Pen mzZyvZ by PointC (@PointC) on CodePen.

Hopefully that helps. Happy tweening.

:)

 

  • Like 6
PointC

PointC

Posted
Posted

PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles.

Happy tweening.

:)

 

  • Like 6
Blake

Blake

Posted
  • Author
Posted

Thank you so much, PointC! You are supreme! I'll check out your stroke-dasharray thread now. 

Have an excellent day!

Best,
Blake

  • Like 3

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...