Pins Simple Effects

index.html

<section class="maps">
  <div class="pins um"></div>
  <div class="pins dois"></div>
  <div class="pins tres"></div>
  <div class="pins quatro"></div>
  <div class="pins cinco"></div>
</section>

Pins-Simple-Effects-.markdown

Pins Simple Effects

To make this simple effect, I used TweenMax, to learn more http://greensock.com/tweenmax

A Pen by Maicol Santos on CodePen.

License.

script.js

var maps = $('.maps');

TweenMax.set(maps.find('.pins'), { css: { transform: 'scale(0)' } });

TweenMax.staggerTo(maps.find('.pins'), 0.5, {
  css: { transform: 'scale(1)' },
  ease: Expo.easeOut,
  delay: 0.2
}, 0.1);

style.less

.maps{
  width: 842px;
  height: 336px;    
  background: url(http://maicolsantos.com/code/img/maps.png) no-repeat;
  position: relative;
  .pins{
    position: absolute;
    background: url(http://maicolsantos.com/code/img/pins.png);
    width: 43px;
    height: 140px;
  }
  .um{left: 60px;top: 10px;}
  .dois{left: 170px;top: 120px;}
  .tres{left: 350px;top: 60px;}  
  .quatro{right: 100px;top: 170px;}  
  .cinco{right: 190px;top: 30px;}  
}