cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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 = new TimelineMax({paused:true});
  TweenLite.set("#demo-hop img", {scale:0.5, y:100})
  animation.to("#demo-hop img", 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 = new TimelineMax({paused:true});
  animation.fromTo("#demo-hop-scale img", 2, {scale:0.5}, {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 = new TimelineMax({paused:true});
  var target = document.getElementById("soft-ball");
  var duration = 3;
  TweenLite.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 = new TimelineMax({paused:true});
  var target = document.getElementById("hard-ball");
  var duration = 0.6;
  TweenLite.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 = new TimelineMax({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 = new TimelineMax({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){
    TweenMax.killTweensOf(currentDemo.animation);
    currentDemo.animation.progress(0)
    TweenLite.set(currentDemo.container, {autoAlpha:0});
  } 
  
  currentDemo = demos_arr[index];
  
  var transition = new TimelineLite();
  
  transition.to(currentDemo.container, 0.5, {autoAlpha:1});
  transition.to("#easeCurve", 0.5, {morphSVG:"#ease-" + currentDemo.name}, 0);
  transition.to("#base", 0.5, {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() {
  TweenLite.set(".demo",  {autoAlpha:0});
  TweenLite.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();




$("#next").on("click", function(){
  demoIndex++;
  if(demoIndex === demosMax){
    demoIndex = 0;
  }
  playDemo(demoIndex);
});

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

$("#replay").on("click", function(){
  TweenMax.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
            
          
!
999px
Loading ..................

Console