22nds
8/25/2017 - 10:39 PM

GSAP

GSAP

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182
//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js?r=19


var tl = new TimelineMax( {
    repeat: -1
} );

tl.to( "svg #display", 2, {
    morphSVG: "svg #result",
    ease: Elastic.easeInOut
} );
tl.to( "svg #display", 2, {
    morphSVG: "svg #original",
    ease: Elastic.easeInOut
} );

    
    
// findShapeIndex() UI
findShapeIndex("#original", "#result");
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js


Draggable.create("#heroines img", {
  bounds: container,
  edgeResistance: 1, // 1 stops the image at the edge
  dragResistance: 0, /// struggling to drag the item
  cursor: "pointer"
  // type: "x" // only move in x axis
});