Jump to content
GreenSock

joshuawalker

What Am I Doing Wrong? MotionPathPlugin

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

Ah, it looks like you had paths that were formatted in a tricky way where some of the values were smashed together with no space or comma. For example:

126.87-32.48-310.91-58-499

Instead of:

126.87,-32.48,-310.91,-58,-499

So you can fix the path markup by adding commas (or spaces) like:

<!-- OLD -->
<path id="path" class="cls-1" d="M2582.77-617.52c-126.87-32.48-310.91-58-499,9.18-231.24,82.61-212.74,214-462.53,359.86-295.13,172.35-460.44,70-804.95,271.15A1407.88,1407.88,0,0,0,569,206.21" transform="translate(-567.97 651.56)"/>

<!-- NEW -->
<path id="path" class="cls-1" d="M2582.77,-617.52c-126.87,-32.48,-310.91,-58,-499,9.18,-231.24,82.61,-212.74,214,-462.53,359.86,-295.13,172.35,-460.44,70,-804.95,271.15A1407.88,1407.88,0,0,0,569,206.21" transform="translate(-567.97 651.56)"/>

 

And don't forget to set the align and alignOrigin

 

I just added some code to the next release of MotionPathPlugin that should handle that correctly. Here's a fork that shows it working:

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

 

Better?

  • Like 1
Link to comment
Share on other sites

5 hours ago, GreenSock said:

Ah, it looks like you had paths that were formatted in a tricky way where some of the values were smashed together with no space or comma. For example:


126.87-32.48-310.91-58-499

Instead of:


126.87,-32.48,-310.91,-58,-499

 

 

 

Okay good information, however is there a way to do this faster? Perhaps a setting in illustrator that will do this for me?

 

Thanks a lot for your help! :)

Link to comment
Share on other sites

@GreenSock

 

Just noticed in your codepen you're using a different version, If I copy this svg code and JS to my project it simply doesn't work using 3.7.1 Motion Path, but I notice in your code pen settings you are using 3.8.0? If I copy the CDN you've changed the codepen to, it works fine!

 

Confused!

Link to comment
Share on other sites

Hi Joshua!

 

The code file he used is the beta for the next release. 3.7.1 will work if you clean up your SVG. A good place to do that is SVGOMG. 

https://jakearchibald.github.io/svgomg/

 

It's always a good idea to run your SVG code through it. Try using this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2015.8 858.76">
  <defs>
    <style>
      .cls-4{fill:#e9e8d8}.cls-5{fill:#f60}.cls-6{fill:#45474a}.cls-7{fill:#fc0}
    </style>
  </defs>
  <path id="path" d="M2014.8 34.04c-126.87-32.48-310.91-58-499 9.18-231.24 82.61-212.74 214-462.53 359.86-295.13 172.35-460.44 70-804.95 271.15A1407.88 1407.88 0 001.03 857.77" fill="none" stroke="#5bc914" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" opacity=".41"/>
  <g id="car">
    <path d="M2554.37-647.94a48.77 48.77 0 017-.45h5a16.49 16.49 0 0116.35 16.61l-.06 7-.06 7a16.46 16.46 0 01-16.6 16.34h-5a48.76 48.76 0 01-7-.55l-6.9-1a49.86 49.86 0 00-7.72-.56l-28.7.17a17.81 17.81 0 00-5 .75 17.49 17.49 0 01-5.22.75l-12.74-.1a12.74 12.74 0 01-12.64-12.84l.09-10.76.09-10.77a12.74 12.74 0 0112.87-12.65l12.73.1a17.74 17.74 0 015.21.84 17.35 17.35 0 005 .82l28.69.63a49.89 49.89 0 007.73-.43z" transform="translate(-567.97 651.56)" fill="#1e1e1e"/>
    <path d="M2552.59-603.24a47.67 47.67 0 006.64.53h4.73a15.54 15.54 0 0015.67-15.42v-6.63l.06-6.64a15.55 15.55 0 00-15.38-15.6h-4.73a47.56 47.56 0 00-6.64.42l-6.53.88a48.16 48.16 0 01-7.3.41L2512-646a16.52 16.52 0 01-4.68-.79 16.75 16.75 0 00-4.92-.78l-12-.1a12 12 0 00-12.11 11.93l-.08 10.16-.08 10.16a12 12 0 0011.92 12.12l12 .09a16.36 16.36 0 004.92-.71 16.67 16.67 0 014.7-.7l27.08-.16a46.78 46.78 0 017.29.52z" transform="translate(-567.97 651.56)" fill="#262626"/>
    <path class="cls-4" d="M2573.44-645.07c2-1.32 5.76 4.5 4.41 6.2s-6.05-5.13-4.41-6.2z" transform="translate(-567.97 651.56)"/>
    <path class="cls-5" d="M2550.89-647.2s-1.84-2.71-2.73-3.16-1.7 0-1.63.28 1.53 3.8 1.53 3.8z" transform="translate(-567.97 651.56)"/>
    <path class="cls-6" d="M2524.09-643.2c4.78.06 8.9 0 11.84-.09a107.79 107.79 0 0017-2c-11.19-.65-20.27-1-27.61-1.11-.55 1.04-.78 2.12-1.23 3.2zM2524.39-646.43c-22.67-.36-28.32 1.26-28.32 1.26 4.54 1.2 16.75 1.81 27.22 2 .34-1.1.86-2.18 1.1-3.26zM2523.81-607.15c4.78 0 8.89.11 11.83.27a107.43 107.43 0 0116.91 2.29c-11.19.47-20.27.66-27.62.67-.48-1.08-.69-2.14-1.12-3.23zM2524.05-603.92c-22.67 0-28.29-1.72-28.29-1.72 4.55-1.12 16.78-1.53 27.24-1.52.32 1.07.83 2.16 1.05 3.24z" transform="translate(-567.97 651.56)"/>
    <path class="cls-7" d="M2478.37-639.61c-.63-.3-.53-1.8.21-3.33s1.86-2.55 2.49-2.24.53 1.8-.22 3.33-1.85 2.55-2.48 2.24z" transform="translate(-567.97 651.56)"/>
    <path class="cls-4" d="M2573.12-604.5c2 1.35 5.83-4.41 4.5-6.13s-6.12 5-4.5 6.13z" transform="translate(-567.97 651.56)"/>
    <path class="cls-5" d="M2550.53-602.73s-1.87 2.68-2.77 3.12-1.71 0-1.63-.31 1.59-3.78 1.59-3.78z" transform="translate(-567.97 651.56)"/>
    <path class="cls-7" d="M2478.15-611.47c-.64.29-.56 1.79.16 3.34s1.81 2.57 2.45 2.27.56-1.79-.16-3.34-1.82-2.57-2.45-2.27z" transform="translate(-567.97 651.56)"/>
    <path class="cls-6" d="M2564.74-624.85c.12-15.19-8.16-19.09-8.16-19.09l-16.35 1.9a94.57 94.57 0 011.72 17 94.15 94.15 0 01-2 17l16.32 2.16s8.35-3.79 8.47-18.97zm-64-.51c-.09 10.93 2 15.84 2 15.84l-16.41-.13s-4.5-4.07-4.4-15.86 4.65-15.79 4.65-15.79l16.41.13s-2.16 4.88-2.25 15.81z" transform="translate(-567.97 651.56)"/>
  </g>
</svg>

 

  • Like 2
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.
×