SVG anime to path-CodePudding

trying to make the clouds move on the path of the SVG but when I do everything the cloud moves off the view part... no idea why this happens.

[this is it on code pen][1]

enter code here[1]: https://codepen.io/paul-santi/pen/MWvMaKp

CodePudding user response：

It is transforms that are causing the problems. The transforms on both your cloud and cloud path, are pushing the cloud away from your desired animation location.

To fix

Firstly, any X,Y offset of the cloud from the origin (0,0) will be included when the cloud follows the path. So the first thing you need to do is move your clouds so that they are at (0,0).

The quick fix I made to solve this was to add a transform back to the origin, by inserting a group element inside #Cloued2


Updated codepen: https://codepen.io/PaulLeBeau/pen/WNEVbrO

    <g id="cloued2" transform="translate(0 0)">
      <g transform="translate(-1270,-307)">
        <circle id="Ellipse_1-2" data-name="Ellipse 1"  r="36" transform="translate(1198 325)" fill="#fff"/>
        <circle id="Ellipse_2-2" data-name="Ellipse 2"  r="36" transform="translate(1234 325)" fill="#fff"/>
        <circle id="Ellipse_3-2" data-name="Ellipse 3"  r="36" transform="translate(1270 325)" fill="#fff"/>
        <circle id="Ellipse_4-2" data-name="Ellipse 4" r="36" transform="translate(1306 325)" fill="#fff"/>
        <circle id="Ellipse_5-2" data-name="Ellipse 5"  r="36" transform="translate(1342 325)" fill="#fff"/>
        <circle id="Ellipse_6-2" data-name="Ellipse 6"  r="36" transform="translate(1306 289)" fill="#fff"/>
        <circle id="Ellipse_7-2" data-name="Ellipse 7" r="36" transform="translate(1270 289)" fill="#fff"/>
        <circle id="Ellipse_8-2" data-name="Ellipse 8"  r="36" transform="translate(1234 289)" fill="#fff"/>
      </g>
    </g>

The next problem is the transform that #Path_Cloued2 has. anime.js will be reading the path definition, but won't be taking account of tht transform. So the cloud will be animating somewhere else on the page.

To fix that problem, I removed the transform and adjusted the path definition to compensate.

Old

<path id="Path_cloued2" data-name="Path cloued2" d="M2323,184l712-25-328,75Z" transform="translate(-2069 114)" fill="none" stroke="#707070" stroke-width="1"/>

New

<path id="Path_cloued2" data-name="Path cloued2" d="M254,184 l 712-25 -328,75Z" fill="none" stroke="#707070" stroke-width="1"/>

Now the cloud follows the path. It still does some odd things, but I suspect that's just a matter of adjusting your animation configuration. Ie. slow it down, and change the easing function to linear.