Jump to content
Search Community

MotionPath object animates but not on the actual path?

Etetherin test
Moderator Tag

Recommended Posts

1 hour ago, GreenSock said:

Nah, you didn't do anything silly - this is just an interesting edge case that I'm looking into because the "align" feature isn't working correctly with your <svg> element. Gimme a little time to get back to you. 

So does that mean its not necessarily something that I am doing wrong then?

Link to comment
Share on other sites

I've been working in this for hours and hours, basically ever since you posted. It has to do with browser quirks related to <svg> root elements. I hope to find a workaround that I can put into the plugin itself, but for now you've got a few options: 

  1. Instead of animating the <svg> element, just wrap that in a <div> and animate that. Make sure you use GSAP 3.2.0 or later, and tap into the new alignOrigin feature. 
  2. Or you can just offset the positioning using offsetX and offsetY. In your demo, it looks like -145 for each of those lines things up. 

Here's a demo with solution #1: 

See the Pen 0f068fc2488a8a07691d3040d9fe0916?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

Alright, after many hours, I think I've got a solid solution baked into the next release of MotionPathPlugin that accurately works around the various quirks and challenges with aligning root <svg> elements. Here's a preview file you can test if you'd like: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js

 

I forked your demo and dropped it in. Seems to work well: 

See the Pen 51f8d67418ee6776a024d636ef932850 by GreenSock (@GreenSock) on CodePen

  • Like 1
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...