JSFiddle - React, Tailwind, and code Playground

by Liamatvenn

HTML

<!-- Map Container -->
<div class="map">
    
    <!-- Points on map -->
    <div class="pin-drop england"></div>
    <div class="pin-drop america"></div>
    <div class="pin-drop australia"></div>
   
    <!-- Marker that bounces -->
    <div class="marker"></div>
    
</div>

CSS

.map {
    height:400px;
    width:800px;
    background:url('http://openclipart.org/image/800px/svg_to_png/19011/shokunin_World_Map.png') no-repeat #cacaca;
    position:relative;
}

.marker {
    background:url('http://www.mricons.com/store/png/124252_43257_128_location_marker_monotone_pin_icon.png');
    width:128px;
    height:128px;    
    position:absolute;
    left:300px;
    top:-100px;
    /*-webkit-animation:staff-pin 1s ease;   */
}

.pin-drop {
    position:absolute;
    background:red;
    height:32px; 
    width:32px;
}

.england {
    top:-42px;
    left:340px;
}

.america {
    top:-42px;
    left:100px;
}

.australia {
    top:-42px;
    left:700px;
}



/*@-webkit-keyframes staff-pin {
    0%   { top:-50px; opacity:0; }
    25%  { top:100px;}
    50%  { top:50px;}
    100% { top:100px; }
}*/

JavaScript

$(document).ready(function(){
    
    // Set variables
    var $marker = $('.marker');
    var $england = $('.england');
    var $america = $('.america');
    var $australia = $('.australia');
    
    // Animate the drops
    $marker.animate({
        top : '100px'
    }, 500, 'easeOutBounce', function(){
        $america.animate({
            top : '150px'
        }, 500, 'easeOutBounce', function(){
            $england.animate({
                top : '80px'
            }, 500, 'easeOutBounce', function(){
                $australia.animate({
                    top : '300px'
                }, 500, 'easeOutBounce');
            });
        });
    });
    
        

});