GSAP animation

Sample animaitons

by Aakash Khapare M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng-app="gameApp" ng-controller="gameCtrl as game" ng-init="game.init()" class="stage">
  <h1 style="text-align: center">Guess the word!</h1>
  <div class="slot-container">
    <div class="slot" ng-repeat="s in game.slotArray track by $index">
      <p class="slot-answer" ng-bind="s"></p>
      <p class="slot-question" ng-bind="'?'" ng-hide="game.revealed.indexOf(s) > -1"></p>
    </div>
  </div>

  <div class="hangman-container">
    <svg version="1.1" width="250" height="180" viewBox="0 0 400 380" fill="none" stroke="#000" stroke-linecap="round">
      <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
      <defs>
        <symbol id="svg_12" height="480" width="640">
          <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->

        </symbol>
      </defs>
      <g>
        <line fill="none" stroke-width="10" x1="102" y1="374" x2="298" y2="375" id="svg_11" stroke="#000000" />
        <line fill="none" stroke-width="5" x1="202" y1="373" x2="206" y2="108" id="svg_10" stroke="#000000" />
        <line fill="none" stroke-width="5" x1="205" y1="111" x2="340" y2="111" id="svg_9" stroke="#000000" />
        <line fill="none" stroke-width="5" x1="338" y1="109" x2="338" y2="140" id="svg_7" stroke="#000000" ng-show="game.chances > 0" />
        <ellipse fill="none" stroke-width="5" cx="337" cy="161" id="svg_6" rx="15" ry="23" stroke="#000000" ng-show="game.chances > 1" />
        <line fill="none" stroke="#000000" stroke-width="5" x1="337" y1="185" x2="338" y2="248" id="svg_5" ng-show="game.chances > 2" />
        <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="335.714294" y1="201.142883" x2="385.714294" y2="179.142883" id="svg_4" ng-show="game.chances > 3" />
        <line fill="none" stroke-width="5"...

CSS

.stage {
  width: 400px;
  height: 480px;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #fff;
  position: relative;
}

.slot-container {
  text-align: center;
}

.slot {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 50px;
}

.slot-answer {
  line-height: 50px;
  text-align: center;
  background-color: #4DD0E1;
}

.slot-question {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  line-height: 50px;
  background-color: #eee;
}

.slot-answer,
.slot-question {
  border: 1px solid #4DD0E1;
  border-radius: 3px;
}

.alpha-container {
  text-align: center;
}

.alpha {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 1px solid #f04;
  border-radius: 3px;
  margin: 3px 5px;
  cursor: pointer;
}

.alpha:hover {
  background-color: #4DD0E1;
}

.hangman-container {
  text-align: center;
}

.game-over {
  font-size: 3em;
  color: #f04;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  opacity: 0.9;
}

img {
  position: absolute;
  top: 0px;
  right: -50px;
}

JavaScript

angular.module("gameApp", [])
  .controller("gameCtrl", [gameCtrl]);

function gameCtrl() {
  var _this = this;
  _this.wonGame = false;
  _this.alphabets = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  _this.slotArray = ["H", "A", "P", "P", "Y"];
  _this.revealed = [];
  _this.chances = 0;

  _this.reveal = function(alpha) {
    if (_this.gameOver) return;
    if (_this.slotArray.indexOf(alpha) > -1) {
      _this.revealed.push(alpha);
      _this.hasWon();
    } else {
      _this.chances++;
      _this.gameState();
    }
  }
  _this.gameState = function() {
    if (_this.chances > 6) {
      _this.gameOver = true;
    }
  }

  _this.hasWon = function() {
    var wonStatus = true;
    $.each(_this.slotArray, function(k, v) {
      wonStatus = wonStatus && (_this.revealed.indexOf(v) > -1);
    });
    _this.wonGame = wonStatus;
  }

  _this.restart = function() {
    _this.gameOver = false;
    _this.wonGame = false;
    _this.revealed = [];
    _this.chances = 0;
  }

  _this.move = function(e) {
    var timeLine = new TimelineMax();
    timeLine.to($(e.target), 0.75, {
      left: "100px",
      right: "auto",
      opacity: 0
    }, 0.2);
  }
}