<svg width="100%" height="100%" viewBox="0 0 650 650">
  <line x1="0" x2="600" y1="501" y2="501" stroke="#ccc" stroke-dasharray="12 6" stroke-width="3" style="opacity:0.4" />
  <line x1="0" x2="600" y1="100" y2="100" stroke="#ccc" stroke-dasharray="12 6" stroke-width="3" style="opacity:0.4" />
  <path id="startEase" fill="none" stroke="#3853a2" stroke-width="4px"/>
  <path id="endEase" fill="none" stroke="#663333" stroke-width="4px"/>
  <path id="blendedEase" fill="none" stroke="#88ce02" stroke-width="8px"/>
  <circle id="ball" fill="#88ce02" r="20" cx="650" cy="500"/>
</svg>
<div id="data"></div>
body {
  background-color: black;
}
svg {
  position:absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  overflow: visible;
  transform: translate(-50%,-50%);
}
#data {
  color: #ccc;
  position: fixed;
  bottom: 10px;
  left: 40px;
  right: 40px;
  text-align: center;
  font-family: courier, monospace;
}

a {
  color: #88ce02;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
/*
Blend 2 eases together easily. Just copy the blendEases() function 
into your project and feed in the start and end eases into that 
function and it'll spit back a new blended ease that you pass 
into your tween. 

In the demo, the blue line is the starting ease, the red line
is the ending ease, and the big green one is the blended result.
For an advanced version that lets you control where the blending begins
(like halfway through), see https://codepen.io/GreenSock/pen/vYJWPQj
*/
function blendEases(startEase, endEase, blender) {
    var s = gsap.parseEase(startEase),
        e = gsap.parseEase(endEase),
        blender = gsap.parseEase(blender || "power3.inOut");
    return function(v) {
      var b = blender(v);
      return s(v) * (1 - b) + e(v) * b;
    };
}

var line1 = "slow(0.3, 0.2, false)", 
    line2 = "back",
    ease = blendEases(line1, line2);
gsap.to("#ball", {duration: 2, y: -400, ease: ease});





//graph the lines...
CustomEase.getSVGData(line1, {width: 600, height: 400, y: 100, path:"#startEase"});
CustomEase.getSVGData(line2, {width: 600, height: 400, y: 100, path:"#endEase"});
CustomEase.getSVGData(ease, {width: 600, height: 400, y: 100, path: "#blendedEase"});

//simplify the path and make it editable! (PathEditor is an unpublished tool from GreenSock)
PathEditor.simplifySVG("#blendedEase", {tolerance: 3});
var editor = PathEditor.create("#blendedEase", {draggable: false, selected: false, onUpdate: displayData});

//this is just to display the path data
var data = document.getElementById("data");
function displayData(d) {
  var s = editor.getNormalizedSVG();
  data.innerHTML = '<a href="https://greensock.com/ease-visualizer/?CustomEase=' + s + '" target="_blank">Get the CustomEase version</a>';
}
displayData();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PathEditor.min.js
  4. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/EasePack.min.js