<main id="main">
      <div class="jump-block">
        <div class="dino-game js-hide js-show-o">
          <div class="dino-game-img">
            <div class="dino-game-img-dino">
            <img src="http://samples.builtwith.care/js-banner-2/img/dino-complete.png"></div>
          </div>
          <div class="dino-game-img-bottle">
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
            <div class="dino-game-img-inner js-off"><img src="http://placehold.it/200x30" /></div>
          </div>
          <div class="dino-game-btn">
            <a href="#" class="btn">Click to jump</a>
          </div>
        </div>
      </div>
    </main>

.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-style: solid;
  transition: all 0.3s ease;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 3px;
  border-width: 1px;
  line-height: 1.1;
  color: #fff;
  background-color: #6b9d52;
  border-color: #6b9d52;
}

.btn:hover {
  color: #fff;
  background-color: #496b38;
  border-color: #496b38;
}

.btn:hover {
  text-decoration: none;
}

.btn-dark {
  color: #fff;
  background-color: #496b38;
  border-color: #496b38;
}

.btn-dark:hover {
  color: #fff;
  background-color: #27381e;
  border-color: #27381e;
}

.btn-outline {
  color: #6b9d52;
  background-color: transparent;
  background-image: none;
  border-color: #6b9d52;
}

.btn-outline:hover {
  color: #fff;
  background-color: #6b9d52;
  border-color: #fff;
}

.btn-outline-dark {
  color: #496b38;
  background-color: transparent;
  background-image: none;
  border-color: #496b38;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #496b38;
  border-color: #fff;
}

.btn-YOU_NAME_BUTTON {
  color: #adff2f;
  background-color: #cd5c5c;
  border-color: #0000ff;
}

.btn-YOU_NAME_BUTTON:hover {
  color: #0000ff;
  background-color: #ffff00;
  border-color: #000000;
}

.btn-lg {
  padding: 15px 25px;
  font-size: 20px;
  border-radius: 8px;
  border-width: 3px;
  line-height: 1.2;
}

.btn-sm {
  padding: 3px 10px;
  font-size: 20px;
  border-radius: 3px;
  border-width: 2px;
  line-height: 1.2;
}

.btn-link {
  color: #6b9d52;
  background-color: transparent;
  border-color: transparent;
  transition: all 0.3s ease;
}

.btn-link:hover {
  color: #496b38;
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 15px;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

img {
  // max-width: 100%;
  height: auto;
  vertical-align: top;
}

body {
  text-align: center;
  background-color: tomato;
  overflow: hidden;
}

h1 {
  text-align: center;
  padding-top: 30px;
}

.js-hide {
  display: none;
  opacity: 0;
}

.js-hide.js-show {
  display: block;
}

.js-hide.js-show-o {
  opacity: 1;
  display: block;
}

.jump-block {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dino-start-bm {
  color: #fff;
  padding: 10px 0;
  background-color: #2881c5;
  position: relative;
  margin-left: -2000px;
  margin-right: -2000px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dino-start-bm h3 {
  margin-bottom: 0px;
}

.dino-start-bm p {
  margin-bottom: 5px;
}

#output {
  margin-bottom: auto;
  padding: 20vh 0 20px;
  font-size: 3.75rem;
  color: #fff;
}

.dino-game-img-dino {
  padding-bottom: 0;
  padding-left: 12px;
}

.dino-game-img-bottle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.dino-game-img-bottle > .dino-game-img-inner {
  position: static;
  text-align: center;
  transform: translate(0%, 0%);
  width: 141px;
}

.dino-game-img-bottle > .dino-game-img-inner.js-off {
  position: absolute;
  left: -200px;
  top: 0;
  transform: translate(-50%, -100%);
}

.dino-game-btn {
  padding: 20px 0;
}

.dino-game-img img {
  position: relative;
}

.an-jump {
  transform: translateY(-200px);
  transition: all 0.3s ease;
}

jQuery(document).ready(function() {
  firstAn();
  secondAn();
  jumpAn();
  imgLeftAn();
});


function firstAn() {
  let tl = new TimelineMax();
  let firsText = $('.firs-text');
  let secondText = $('.second-text');
  let secondTextAn = $('.second-text-an');

  tl.delay(2)
  .to(firsText, 1, { opacity: 0, onComplete: function() {
    firsText.addClass('js-hide');
    secondText.addClass('js-show');
  }})
  .to(secondText, 1, {opacity: 1, onComplete: function() {
    secondTextAn.addClass('swing');
  }});
}

function secondAn() {
  let tl2 = new TimelineMax();
  let startAnnBtn = $('.dino-start-btn a');
  let dinoStartBm = $('.dino-start-bm');
  let thirdText = $('.third-text-an');
  let secondText = $('.second-text, .dino-start-img img');
  startAnnBtn.on('click', function() {
    event.preventDefault();
    tl2.to(secondText, 1, {
      opacity: 0,
      scale: 0.5,
      onComplete: function() {
        timerInit();
        secondText.removeClass('js-show');
        thirdText.addClass('js-show-o').addClass('swing');
      }
    })
  });
}

function thirdAn() {
  let tl3 = new TimelineMax();
  let dinoGame = $('.dino-game');
  tl3.set(dinoGame, {scale:0.5})
  .to(dinoGame, 0, {onComplete: function() {
    dinoGame.addClass('js-show');
  }})
  .to(dinoGame, 1, { opacity: 1, scale:1, onComplete: function() {
    imgLeftAn();
  }})
}

function jumpAn() {
  let tl4 = new TimelineMax();
  var jumpBtn = $('.dino-game-btn');
  var dinoImg = $('.dino-game-img img');

  jumpBtn.on('click', function(event) {
    event.preventDefault();
    tl4.to(dinoImg, 0.7, { ease: Circ.easeOut, top: -200 }).to(dinoImg, 0.6, { top: 0 })
  });
}

function imgLeftAn() {
  var tl5 = new TimelineMax();
  var bottleImg = $('.dino-game-img-inner.js-off');
  var timeAnn = 3;
  if (document.documentElement.clientWidth <= 1024) {
    timeAnn = 2;
  }
  if (bottleImg.length == 0) {
    console.log("You win");
  }

  if (bottleImg.length > 0) {
    var bottleImgLast = bottleImg.last();
    TweenMax.to(bottleImgLast, timeAnn, {
      ease: Power0.easeOut,
      left: "50%",
      onComplete: function() {
        bottleImgLast.removeClass('js-off');
        imgLeftAn();
      }
    })
  }
}
let timerInit = (timeArg = 3) => {
  var time = timeArg,
    fps = 60;
  var Timer = function(obj) {
    this.time = obj.time;
    this.fps = obj.fps;
    this.onEnd = obj.onEnd || null;
    this.onStart = obj.onStart || null;
    this.onTick = obj.onTick || null;
    this.intervalID = null;
    this.start = () => {
      this.interval = setInterval(this.update, 1000 / this.fps);
      this.onStart ? this.onStart() : void 0;
      return this;
    };
    this.stop = () => {
      clearInterval(this.interval);
      this.onEnd ? this.onEnd() : void 0;
    };
    this.update = () => {
      this.time > 0 ? this.time -= 1 / this.fps : this.stop();
      this.onTick ? this.onTick() : void 0;
      return this.get();
    }
    this.get = (par) => {
      switch (par) {
        case undefined:
          return this.time;
          break;
        case "dig":
          return Math.ceil(this.time);
          break;
        case "end":
          return this.onEnd();
          break;
      }
    }
  }
  var timer1 = new Timer({
    time: time,
    fps: fps,
    onTick: tick,
    onEnd: endTimer,
    onStart: onTimerStart
  });

  function onTimerStart() {
    console.log("timer started");
  }

  function endTimer() {
    let dinoStartBm = $('.dino-start-bm');
    let outputTimer = $('#output');
    console.log("timer ended");
    setTimeout(function() {
      TweenMax.to(outputTimer, 1, { opacity: 0, scale: 0.7});
      TweenMax.to(dinoStartBm, 1, { opacity: 0, scale: 0.5, bottom: "100%",  onComplete: function() {
        thirdAn();
      }
      });

    }, 300)
  }
  timer1.start()
  requestAnimationFrame(tick);


  function tick() {
    id("output").innerHTML = timer1.get("dig");
    // id("slider").style.width = timer1.get() / time * 100 + "%";
  }

  function id(id) {
    return document.getElementById(id);
  }
}