What Am I Doing Wrong? MotionPathPlugin

[joshuawalker 2 Likes (Newbie)]

Simply cannot get this thing to look fully central to to the line the entire time! HELP  

 

Thanks 

See the Pen rNmwmVj by joshlw123123123 (@joshlw123123123) on CodePen

[GreenSock 17,854 Likes (Superhero)]

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?

[joshuawalker 2 Likes (Newbie)]

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!

[joshuawalker 2 Likes (Newbie)]

@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!

[OSUblake 18,451 Likes (Superhero)]

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>