Animation for dropping Pin in the Map (Bouncing Pin)

Pins are used in maps to point out a location. Usually pins can be added in a map just with a single Click. By selecting a pin option if we click over a map, a pin drop symbol as shown below will appear over the map.

Now you may ask “what is the purpose of adding animations for pins?”. To answer your question, if you are planning to add map option in a website and while your visitor is trying to add pins, the user will feel the power of animation over pins while it is animated. This will bring more user interaction compared to just adding a small pin symbol in a map.

We hope you are clear about pins and the purpose of animating it. In this tutorial we are going to show Elastic type Bouncing animation for pins. To clearly say while selecting a place over map, a bouncing pin will appear which will be more interactive than a normal pin.

Please see this Demo and try adding pin in the map.

How it is working?

Have you tried our demo of animating pins in the map shown above?
Okay now let us see how to create or add such animations for pins.
This animation is done using CSS3.

HTML Markup

Before we start, First make a HTML structure for pin icon.

 

CSS

Add the below CSS code in <style&gt tag inside <head&gt

.map-icon{
position: absolute;
display: none;
}
.map-icon div{
background: url(pin image);
display: inline-block;
width: 40px;
height: 70px;
background-size: 40px 70px;
cursor: pointer;
}
.map-icon.clickMe div{
animation: mapPinScale 1.2s ease 1 forwards;
}

Keyframes

Add the below keyframe “mapPinScale” with various transform values for bouncing effect.
@keyframes mapPinScale{
0%{transform: translate3d(0px,0%,0px) scale(0.5,0.5); transform-origin: bottom;}
10%{transform: translate3d(0px,0%,0px) scale(0.6,1.1); transform-origin: bottom;}
20%{transform: translate3d(0px,0px,0px) scale(1.1,0.7); transform-origin: bottom;}
30%{transform: translate3d(0px,0px,0px) scale(0.7,1.05); transform-origin: bottom;}
40%{transform: translate3d(0px,0px,0px) scale(1.05,0.85); transform-origin: bottom;}
50%{transform: translate3d(0px,0px,0px) scale(0.8,1.03); transform-origin: bottom;}
60%{transform: translate3d(0px,0px,0px) scale(1.01,0.9); transform-origin: bottom;}
70%{transform: translate3d(0px,0px,0px) scale(0.9,1.01); transform-origin: bottom;}
80%{transform: translate3d(0px,0px,0px) scale(1.0001,0.95); transform-origin: bottom;}
90%{transform: translate3d(0px,0px,0px) scale(1,1); transform-origin: bottom;}
}

Jquery

Here is the jquery script for setting pin position and also to add bouncing effect using class “clickMe“.
function point_pin(){
$(“body”).on(“click”,function(event){
$(“#map-icon”).removeClass(“clickMe”);
setTimeout(function(){
$(“#map-icon”).show().css({“left”:event.pageX-20,”top”:event.pageY-70}).addClass(“clickMe”);
},100);
});
}
Call the above function point_pin from the document.ready function as shown below.
$(document).ready(function(){
point_pin();
});

Add this code in your map and try dropping a pin. Enjoy animating it.

 

Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂

You may also like