<div class="explorer">
  <h2 id="easeName"></h2>
  <div class="display">
    <div class="demos">
      <!-- begin demos -->
      

      <div id="demo-hop" class="demo">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" width="350" />
      </div>
       <div id="demo-hop-scale" class="demo">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" width="350" />
      </div>

      <div id="demo-bounce-soft" class="demo">
        <div class="ball" id="soft-ball"></div>
      </div>

      <div id="demo-bounce-hard" class="demo">
        <div class="ball" id="hard-ball"></div>
      </div>
      
      <div id="demo-custom-wiggle" class="demo">
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" width="350" />
      </div>
      
      <div id="demo-custom-wiggle-brrr" class="demo">
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" width="350" />
      </div>

    <!-- close demos -->
    </div>
    <svg id="eases" width="400" height="400" viewBox="0 0 300 300">
      <line id="base" x1="0" y1="0" x2="300" y2="0" style="stroke:rgba(255,0,0, 0.5);stroke-width:2" />
</svg>
  </div>
  <div class="nav">
    <button id="previous">previous</button>
    <button id="replay">replay</button>
    <button id="next">next</button>
  </div>
  <div class="pathData">
  </div>
</div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

.demos {
  width:400px;
  height:400px;
  position:relative;
  overflow:hidden;
  border: solid 1px grey;
  float:left;
}

.demo {
  width:400px;
  height:400px;
  position:absolute;
  visibility:hidden;
}


#eases {
  float:right;
  border: solid 1px grey;
  
}

.explorer {
  width:820px;
  margin:20px auto;
}

.display {
  position:relative;
  height:400px;
}
.nav {
  position:relative;
  margin:20px;
  width:800px;
  text-align:center;
  
}


.ball {
  width:100px;
  height:100px;
  background-color:#8AC640;
  position:absolute;
  border-radius:50%;
  left:50%;
  
}
console.clear();
var demos_arr = [];
var demosMax;
var demoIndex;

var hop = (function() {
  var name = "hop";
  var ease = CustomEase.create(name, "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,-0.005 0.332,-0.005 0.332,-0.005 0.414,1 0.671,1 0.991,1 1,-0.005 1,-0.005");
  var container = "#demo-hop"
  var animation = gsap.timeline({paused:true});
  gsap.set("#demo-hop img", {scale:0.5, y:100})
  animation.to("#demo-hop img", {duration: 1, y:-100, ease:ease});
  drawEase("ease-" + name, ease, 0);
  return {
    ease:ease,
    animation: animation,
    name:name,
    container:container
  };

})();

var hopScale = (function() {
  var name = "scaleHop";
  var ease = CustomEase.create(name, "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,-0.005 0.332,-0.005 0.332,-0.005 0.414,1 0.671,1 0.991,1 1,-0.005 1,-0.005");
  var container = "#demo-hop-scale"
  var animation = gsap.timeline({paused:true});
  animation.fromTo("#demo-hop-scale img", {scale:0.5}, {duration: 2, scale:1, rotation:20, ease:ease});
  drawEase("ease-" + name, ease, 0);
  return {
    ease:ease,
    animation: animation,
    name:name,
    container:container
  };

})();




var bounceSoft = (function() {
  var name = "softBounce";
  var ease = CustomEase.create(name, "M0,100 C15.8,100 22.6,0 22.6,0 22.6,0 29.4,0 29.4,0 29.4,0 32.7,49 42.6,49 50.5,49 56.399,0 56.399,0 56.399,0 59.699,0 59.699,0 59.699,0 62.3,21.669 67.6,21.669 71.8,21.669 75.8,0 75.8,0 75.8,0 77.2,0 77.2,0 77.2,0 78.8,8.648 81.899,8.648 84.399,8.648 86.8,0 86.8,0 86.8,0 87.4,0 87.4,0 87.4,0 88.2,3.115 90.2,3.115 91.7,3.115 93.1,0 93.1,0 93.1,0 93.3,0 93.3,0 93.3,0 93.7,1.012 94.899,1.012 95.899,1.012 96.7,0 96.7,0 96.7,0 96.7,0 96.7,0 96.7,0 96.899,0.297 97.7,0.297 98.3,0.297 98.7,0 98.7,0 98.7,0 98.8,0 98.8,0 98.8,0 98.9,0.078 99.3,0.078 99.7,0.078 99.9,0 100,0");
  var squash = CustomEase.create("squash", "M0,100 C0,100 22.6,100 22.6,100 22.6,100 22.6,0 26,0 29.4,0 29.4,100 29.4,100 29.4,160 33.9,100 56.399,100 56.399,100 56.399,51 58.099,51 59.699,51 59.699,100 59.699,100 59.699,129.399 62.4,100 75.8,100 75.8,100 75.8,78.33 76.5,78.33 77.2,78.33 77.2,100 77.2,100 77.2,113.001 78.8,100 86.8,100 86.8,100 86.8,91.351 87.1,91.351 87.4,91.351 87.4,100 87.4,100 87.4,105.188 88.3,100 93.1,100 93.1,100 93.1,96.884 93.2,96.884 93.3,96.884 93.3,100 93.3,100 93.3,101.869 93.8,100 96.7,100 96.7,100 96.7,98.987 96.7,98.987 96.7,98.987 96.7,100 96.7,100 96.7,100.607 97.1,100 98.7,100 98.7,100 98.7,99.702 98.7,99.702 98.8,99.702 98.8,100 98.8,100 98.8,100.178 99,100 100,100")
  var container = "#demo-bounce-soft"
  var animation = gsap.timeline({paused:true});
  var target = document.getElementById("soft-ball");
  var duration = 3;
  gsap.set(target, {xPercent:-50, top:-100, transformOrigin:"center bottom"});
  animation.to(target, duration, {y:400, ease:ease})
    .to(target, duration, {scaleX:1.3, scaleY:0.6, ease:squash}, 0);
  
  drawEase("ease-" + name, ease, 0);
  return {
    ease:ease,
    animation: animation,
    name:name,
    container:container
  };
})();


var bounceHard = (function() {
  var name = "hardBounce";
  var ease = CustomEase.create(name, "M0,100 C18.099,100 25.9,0 25.9,0 25.9,0 29.7,49 41,49 50,49 56.699,0 56.699,0 56.699,0 59.599,21.669 65.7,21.669 70.5,21.669 75,0 75,0 75,0 76.8,8.648 80.4,8.648 83.2,8.648 85.9,0 85.9,0 85.9,0 86.9,3.115 89.1,3.115 90.9,3.115 92.4,0 92.4,0 92.4,0 92.9,1.012 94.3,1.012 95.399,1.012 96.3,0 96.3,0 96.3,0 96.5,0.297 97.399,0.297 98.1,0.297 98.6,0 98.6,0 98.6,0 98.7,0.078 99.3,0.078 99.7,0.078 100,0 100,0");
  var container = "#demo-bounce-hard"
  var animation = gsap.timeline({paused:true});
  var target = document.getElementById("hard-ball");
  var duration = 0.6;
  gsap.set(target, {xPercent:-50, top:-100, transformOrigin:"center bottom"});
  
  animation.to(target, duration, {y:400, ease:ease})
    
  
  drawEase("ease-" + name, ease, 0);
  return {
    ease:ease,
    animation: animation,
    name:name,
    container:container
  };
})();

var tada = (function() {
  var name = "tada";
  var ease = CustomEase.create("tada", "M0,100 C1.2,100 2.5,0.2 5,0.2 10,0.2 10,199.2 15,199.2 20,199.2 20,3.299 25,3.299 30,3.299 30,191.9 35,191.9 39.9,191.9 39.9,16.2 44.9,16.2 49.9,16.2 49.9,171.3 54.9,171.3 60,171.3 59.9,47.3 64.9,47.3 70,47.3 69.899,129.9 74.9,129.9 79.9,129.9 79.9,88.4 84.899,88.4 89.9,88.4 89.9,102.4 95,102.4 97.399,102.4 97.399,100 100,100");
  var container = "#demo-custom-wiggle"
  var animation = gsap.timeline({paused:true});
  animation.to("#demo-custom-wiggle img", 2, {rotation:30, ease:ease, transformOrigin:"70% 40%"});
  drawEase("ease-" + name, ease, 0, 300, 150);
  return {
    ease:ease,
    animation: animation,
    name:name,
    container:container,
    normalizedY:150
  };
})();

var brrr = (function() {
  var name = "brrr";
  var ease = CustomEase.create(name, "M0,100 C0.4,100 0.8,0.099 1.6,0.099 3.3,0.099 3.3,199.9 5,199.9 6.6,199.9 6.6,0.4 8.3,0.4 10,0.4 10,199.2 11.6,199.2 13.3,199.2 13.3,1.4 15,1.4 16.6,1.4 16.6,197.8 18.3,197.8 19.9,197.8 19.9,3.299 21.6,3.299 23.3,3.299 23.3,195.399 25,195.399 26.6,195.399 26.6,6.2 28.299,6.2 30,6.2 30,191.9 31.6,191.9 33.3,191.9 33.3,10.399 35,10.399 36.6,10.399 36.6,186.9 38.3,186.9 39.9,186.9 39.9,16.2 41.6,16.2 43.3,16.2 43.3,180.2 44.9,180.2 46.6,180.2 46.6,23.9 48.3,23.9 49.9,23.9 49.9,171.3 51.6,171.3 53.3,171.3 53.3,34.2 54.9,34.2 56.599,34.2 56.599,159.6 58.3,159.6 60,159.6 59.9,47.3 61.6,47.3 63.3,47.3 63.3,145.2 64.9,145.2 66.6,145.2 66.6,62.5 68.3,62.5 70,62.5 69.899,129.9 71.6,129.9 73.3,129.9 73.3,77.1 74.9,77.1 76.6,77.1 76.6,116.7 78.3,116.7 79.9,116.7 79.9,88.4 81.6,88.4 83.3,88.4 83.3,107.6 84.899,107.6 86.6,107.6 86.6,95.4 88.3,95.4 89.9,95.4 89.9,102.4 91.6,102.4 93.3,102.4 93.3,99 95,99 96.6,99 96.6,100.2 98.3,100.2 99.1,100.2 99.1,100 100,100");
  var container = "#demo-custom-wiggle-brrr"
  var animation = gsap.timeline({paused:true});
  animation.to("#demo-custom-wiggle-brrr img", 1, {x:5, ease:ease});
  drawEase("ease-" + name, ease, 0, 300, 150);
  return {
    ease:ease,
    animation: animation,
    name:name,
    container:container,
    normalizedY:150
  };
})();


var currentDemo;
function playDemo(index) {
 
  if(currentDemo){
    gsap.killTweensOf(currentDemo.animation);
    currentDemo.animation.progress(0)
    gsap.set(currentDemo.container, {autoAlpha:0});
  } 
  
  currentDemo = demos_arr[index];
  
  var transition = gsap.timeline();
  
  transition.to(currentDemo.container, {autoAlpha:1});
  transition.to("#easeCurve", {morphSVG:"#ease-" + currentDemo.name}, 0);
  transition.to("#base", {y:currentDemo.normalizedY || 300}, 0) // move the red line for wiggles
  transition.add(currentDemo.animation.tweenFromTo(0, currentDemo.animation.duration()));
  //transition.to("#easeName", 0.2, {text:currentDemo.name}, 0);
  //transition.set(".pathData", {text:CustomEase.getSVGData(currentDemo.name)}, 0);
}



function init() {
  gsap.set(".demo",  {autoAlpha:0});
  gsap.set("#base", {y:300})

  demos_arr.push(hop);
  demos_arr.push(hopScale);
  demos_arr.push(bounceHard);
  demos_arr.push(bounceSoft);
  demos_arr.push(tada);
  demos_arr.push(brrr);
  
  demosMax = demos_arr.length;
  console.log(demos_arr[0])
  drawEase("easeCurve", demos_arr[0].ease, 1);
  demoIndex = 0;
  playDemo(demoIndex);
  
}

init();




document.querySelector("#next").addEventListener("click", function() {
  demoIndex++;
  if(demoIndex === demosMax){
    demoIndex = 0;
  }
  playDemo(demoIndex);
});

document.querySelector("#previous").addEventListener("click", function() {
  demoIndex--;
  if(demoIndex < 0){
    demoIndex = demosMax-1;
  }
  playDemo(demoIndex);
});

document.querySelector("#replay").addEventListener("click", function() {
  gsap.killTweensOf(currentDemo.animation);
  currentDemo.animation.tweenFromTo(0, currentDemo.animation.duration())
});



function drawEase(id, ease, opacity, width, height) {
  var width = width || 300;
  var height = height || 300;
  console.log("drawEase ", id, ease)
  var data = CustomEase.getSVGData(ease, {x:0, y:0, width:width, height:height});
  //$('<path id="' + id + '" d="' + data + '"></path>').appendTo("svg");
  var path = _createSVG("path",  "#eases", {id: id, fill:"none", stroke:"#8AC640", strokeWidth:2, d:data, opacity:opacity}); 
}

function _createSVG (type, container, attributes) {
    var element = document.createElementNS("http://www.w3.org/2000/svg", type),
        reg = /([a-z])([A-Z])/g,
        p;
    for (p in attributes) {
        element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
    }
    if (typeof(container) === "string") {
        container = document.querySelector(container);
    }
    container.appendChild(element);
    return element;
}


//drawEase("fastSlow", fastSlow)




//watch this video on CustomEase and CustomBounce: https://www.youtube.com/watch?v=GjXUhpYA168
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js