GSAP Playground 1: Button Basics

GSAP Playground 1: Button Basics.markdown

GSAP Playground 1: Button Basics

Trying out GSAP because I feel inept. Click the button and it does things.

A Pen by Jake Albaugh on CodePen.

License.

index.html

<button id=btn>GSAP</button>

script.js

function Button(id) {
  
  var self = this;
  this.el = document.getElementById(id);

  // state variables
  this.state = 1;
  this.totalStates = 5;
  this.states = {};
  
  // animation settings
  this.anim = {
    time: 0.75,
    bounce: Back.easeOut.config(1.4),
    out: Power2.easeOut
  };
  
  // state initialization
  this.setupStates = function() {
    
    //
    // empty states
    //
    
    self.states = [];
    
    // 
    // scale small
    // 
    
    self.states.push(
      TweenMax.to(self.el, self.anim.time, {
        scale: 0.7, 
        ease: self.anim.bounce, 
        paused: true
      })
    );
    
    //
    // scale full
    //
    
    self.states.push(
      TweenMax.to(self.el, self.anim.time, {
        scale: 1, 
        ease: self.anim.bounce, 
        paused: true
      })
    );
    
    //
    // rotation dance
    //
    
    self.states.push(
      TweenMax.to(self.el, self.anim.time, {
        rotation: 15, 
        ease: self.anim.out, 
        onComplete: function () {
          TweenMax.to(self.el, self.anim.time, {
            rotation: -15, 
            ease: self.anim.out, 
            onComplete: function () {
              TweenMax.to(self.el, self.anim.time, {
                rotation: 0, 
                ease: self.anim.bounce
              });
            }
          });
        },
        paused: true
      })
    );
    
    //
    // shadow 
    //
    
    var baseShadow = "0px 4px 0px 0px #F9A485",
        bigShadowDown = [
          "0px  4px 0px 0px #F9A485",
          "0px  8px 0px 0px #B7D6D0",
          "0px 12px 0px 0px #68AEA1"
        ].join(","),
        bigShadowUp = [
          "0px  -4px 0px 0px #F9A485",
          "0px  -8px 0px 0px #B7D6D0",
          "0px -12px 0px 0px #68AEA1"
        ].join(",");
    
    self.states.push(
      TweenMax.to(self.el, self.anim.time, {
        boxShadow: bigShadowDown, 
        ease: self.anim.out, 
        onComplete: function () {
          TweenMax.to(self.el, self.anim.time, {
            boxShadow: bigShadowUp, 
            ease: self.anim.out,
            onComplete: function () {
              TweenMax.to(self.el, self.anim.time, {
                boxShadow: baseShadow, 
                ease: self.anim.out
              });
            }
          });
        },
        paused: true
      })
    );
    
    //
    // border radius
    //
    
    self.states.push(
      TweenMax.to(self.el, self.anim.time, {
        borderRadius: "1em",
        ease: self.anim.out, 
        onComplete: function () {
          TweenMax.to(self.el, self.anim.time, {
            borderRadius: "0.125em", 
            ease: self.anim.out
          });
        },
        paused: true
      })
    );
  }
  
  // initialize the button
  this.init = function() {
    self.setupStates();
    self.stateHandler();
    self.el.addEventListener("click", self.stateHandler);
  };
  
  // triggering different states
  this.stateHandler = function() {
    self.states[self.state - 1].restart();
    // setup states to reset
    self.setupStates();
    // loop to next state
    if (self.state < self.totalStates) { self.state++ } else { self.state = 1 };
  };
  
}

// my first GSAP button
var button = new Button("btn");
// get goin, son.
button.init();



jakealbaughSignature();

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

style.scss

$c-primary: #FAB69D;
$c-primary-dark: darken($c-primary,5%);
$c-background: #F6EEDF;

button {
  appearance: none;
  border: none;
  padding: 0.5em 2em;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0px 4px 0px 0px $c-primary-dark;
  border: 1px solid $c-primary-dark;
  text-shadow: 1px 1px 0px $c-primary-dark;
  font-size: 2em;
  background: $c-primary;
  color: white;
  border-radius: 0.125em;
  outline: none;
}

body {
  background: $c-background;
}