Draggable 3 on path

draggable-3-on-path.markdown

Draggable 3 on path

A Pen by Gon on CodePen.

License.

index.html

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 304.27 304.27">
<defs>
<linearGradient id="linear-gradient" x1="32.88" y1="188.57" x2="271.4" y2="188.57" gradientUnits="userSpaceOnUse">
<stop offset=".17" stop-color="#72cf00"/>
<stop offset=".21" stop-color="#8dca0f"/>
<stop offset=".27" stop-color="#b5c326"/>
<stop offset=".34" stop-color="#d4be38"/>
<stop offset=".4" stop-color="#eaba45"/>
<stop offset=".46" stop-color="#f8b84d"/>
<stop offset=".51" stop-color="#fdb850"/>
<stop offset=".74" stop-color="#ef5a54"/>
<stop offset=".92" stop-color="#e51957"/>
<stop offset="1" stop-color="#e20059"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0" y1="152.14" x2="304.27" y2="152.14" gradientUnits="userSpaceOnUse">
<stop offset=".16" stop-color="#72cf00"/>
<stop offset=".53" stop-color="#ffb353"/>
<stop offset="1" stop-color="#e20059"/>
</linearGradient>
</defs>
<g id="selector">
<g>

<circle id="circle" cx="152.14" cy="152.14" r="150" style="fill:none; stroke:url(#linear-gradient-2); stroke-miterlimit:10; stroke-width:4.27px;"/>
<g id="hitarea">
<rect x="37.26" y="140.13" width="70" height="70"/>
<path id="apple" d="m46.89,174.68c.3,13.46,11.46,24.12,24.92,23.82,13.46-.3,24.12-11.46,23.82-24.92s-11.46-24.12-24.92-23.82c-13.46.3-24.12,11.46-23.82,24.92Zm10.28-8.07c4.64-4.72,10.43-2.9,12.8-1.84-.31-.79-.7-1.66-1.28-2.49-.52-.74-1.35-1.68-2.74-2.51.07-.48.24-1.15.61-1.89.29-.56.61-.99.89-1.3,1.07,1.81,1.9,3.34,2.46,4.43.89,1.72,1.46,2.97,1.82,3.9,2.01-1.09,8.11-3.72,13.26,1.07,6.26,5.82,2.17,17.82-2.87,22.46-5.42,4.99-10.48,2.73-10.48,2.73,0,0-4.96,2.49-10.6-2.26-5.24-4.4-9.87-16.2-3.88-22.3Z" style="fill:#fff;"/>
</g>
<path id="path" d="m72.45,174.76c6.85,6.35,14.47,11.69,22.62,16.01,8.47,4.49,17.5,7.89,26.83,10.2,10.46,2.58,21.28,3.79,32.08,3.62,8.9-.14,17.79-1.22,26.44-3.23s16.22-4.66,23.82-8.26c9.91-4.68,19.13-10.8,27.27-18.34" style="fill:none; stroke:#000; stroke-miterlimit:10;"/>
</g>
</g>
</svg>

script.js

gsap.registerPlugin(MotionPathPlugin, Draggable);

var target = document.querySelector("#hitarea");
var path = document.querySelector("#path");
var bounds = path.getBBox();
var clamp = gsap.utils.clamp(0, 1);
var prevProgress = 0;

var tl = gsap.timeline({paused: true})
  .to(target, {motionPath: {
    path: path,
    align: path,
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }, immediateRender: true, ease: "none"})

Draggable.create(target, {type: "x", onDrag: function() {
  var progress = clamp((this.x - bounds.x)  / bounds.width);
  if (progress !== prevProgress) {
    tl.progress(progress);
    prevProgress = progress;
  } else {
    return false;
  }
}});

scripts

<script src="https://assets.codepen.io/16327/gsap-latest-beta.min.js?r=3.11.5"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js"></script>

style.css

svg{
  width:500px
}