GSAP: easing

In this example below you will see how to do a GSAP: easing with some HTML / CSS and Javascript

Forked from P. Colin Manikoth's Pen Greensock TweenMax : Basics.

Thumbnail
This awesome code was written by melindbutler01, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright melindbutler01 ©
  • HTML
  • CSS
  • JavaScript
    <!-- Stage -->
<div id="stage">
  <h1>stuff</h1>
  <h2 id="stunt">Stunt</h2>
  
</div>

/*Downloaded from https://www.codeseek.co/melindbutler01/gsap-easing-PNNxrx */
    /* Relative Parent */
#stage {
  /* set the stage    */
  position: relative;
  overflow: hidden;
  
  background: #ccc;
  height: 300px;
  margin: 3em auto;
  width: 400px;
}

/* Absolute Children */
h1,
h2 {
  position: absolute;
 
}

h1 {
  bottom: 0;
  right: 0;
}




/*Downloaded from https://www.codeseek.co/melindbutler01/gsap-easing-PNNxrx */
    
// self invoking function to isolate Greensock
(  function(){
  
  var h2 = $('h2');
  var h1 = $('h1');
  
  // Your Awesomeness
TweenMax.to(h1, .5, {
  right: 0,
  fontSize: '12em',
  delay: 2

});
  
  
 //do not delete 
}());








Comments