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
});