MotionPathHelper demo

index.html

<!-- "Rocket Man" by Chris Gannon https://cdpn.io/EjVyXN -->

<svg id="motionPath" viewBox="-20 0 557 190">
 
  <path id="path" d="M514.848,240.268 C514.848,240.268 462.662,309.218 412.151,283.486 360.531,257.176 424.152,258.407 369.053,201.105 311.913,141.681 165.959,196.156 231.489,257.236 266.054,289.453 337.87,332.206 321.33799,225.90001 315.616,189.108 133.021,268.325 123.252,316.289 110.777,377.48 227.33,329.843 281.915,305.464 335.673,281.454 173.976,283.356 86.665,300.815 6.436,316.844 20.851,252.546 20.851,252.546 "/>

  <path id="path2" d="M6.931,91.47 C6.931,91.47 144.087,127.04 105.017,130.397 47.303,135.349 93.65999,62.66001 168.74799,36.56901 231.32099,14.82701 180.40899,65.70901 245.79799,65.03901 312.60199,64.35401 333.10199,116.64001 307.50799,134.80901 277.14599,156.36201 141.60999,64.21301 131.83799,112.16901 119.36699,173.36601 216.199,184.68 268.085,214.373 326.136,247.594 392.043,78.874 409.064,75.233 424.067,72.023 505.879,63.687 505.879,63.687 " />
  
   <image class="astronaut" xlink:href="https://mk-dizajn.hr/misc/renata.jpg" height="200" width="200"/>
   <image class="astronaut2" xlink:href="https://mk-dizajn.hr/misc/paula.jpg" height="200" width="200"/>

</svg>

<div class="flex">
  <input type="text" name="p1">
  <input type="text" name="p2">
</div>

motionpathhelper-demo.markdown

MotionPathHelper demo

GSAP 3.0 introduces a brand new MotionPathPluginHelper which makes editing curves in the browser a breeze! It's one of the many Club GreenSock perks https://greensock.com/club/

A Pen by kpendic on CodePen.

License.

script.js

//register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin);

gsap.set(".astronaut", {xPercent: -50, yPercent: -50, transformOrigin: "50% 50%", scale: 0.5, autoAlpha: 1});
gsap.set(".astronaut2", {xPercent: -50, yPercent: -50, transformOrigin: "50% 50%", scale: 0.5, autoAlpha: 1});

gsap.to(".astronaut", {
  duration: 5, 
  ease: "power1.inOut",
  immediateRender: true,
  motionPath: {
    path: "#path",
    autoRotate: 90
  }
});

gsap.to(".astronaut2", {
  duration: 8, 
  ease: "power1.inOut",
  immediateRender: true,
  motionPath: {
    path: "#path2",
    autoRotate: 90
  }
});


MotionPathHelper.create(".astronaut");
MotionPathHelper.create(".astronaut2");

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?v=21"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js?v=46"></script>

style.css

#motionPath {
  overflow: visible;
  height: 100%;
  max-width: 100%;
}

#motionPath path {
  stroke-width: 2;
  stroke: gray;
}

.astronaut {
  visibility: hidden;
}

.flex{
  position: fixed;
  bottom: 10px;
  width: 98%;
  display: block;  
}
input{
  display: block;
  width: 95%;
  margin: 0 auto;
}

styles

<link href="https://codepen.io/GreenSock/pen/AHquG" rel="stylesheet" />