gasp

by Oleh Kotsubko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<div class="elem elem-1"></div>
<div class="elem elem-2"></div>
<div class="elem elem-3"></div>
<div class="elem elem-4"></div>

SCSS

body {
  position: relative;
  overflov-x: hidden;
  color: #fff;
}

.elem {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: relative;
  transform: scale(0);
  opacity: 0;
  &-1{
    background-color: red;
  }
  &-2{
    background-color: silver;
  }
  &-3{
    background-color: pink;
  }
  &-4{
    background-color: orange;
  }
  
  
}

JavaScript

$(document).ready(function(){

let tl = new TimelineMax();

  tl.staggerTo($('.elem'), .8, {
      scale: 1,
      x: 10,
      rotation: 360,
      autoAlpha: 1,
      ease: Expo.easeOut
  }, .3);

});