# Tinder-esque location pulse animation effect

As shameful as it is to say I wanted to see what all the fuss about was with Tinder, but after downloading it I found I was more interested with its animation effects and started wondering how they did them!

I decided I wanted to see if I could replicate some of them using jQuery so they can be used on web apps and sites and such, but it's always nice to have these snippets lying around if I ever need them.

This seems lightweight enough, and I'm pretty sure I've covered everything, each circle element is targeted individually, the elements are removed after to stop a build up etc. But just out of curiosity, would anyone have approached it differently?

$(document).ready(function () { var x = 0; addCircle(x); setInterval(function () { if (x === 0) { x = 1; } addCircle(x); x++; }, 1200); }); function addCircle(id) {$('body').append('<div id="' + id + '" class="circle"></div>');

$('#' + id).animate({ 'width': '300px', 'height': '300px', 'margin-top': '-150px', 'margin-left': '-150px', 'opacity': '0' }, 4000, 'easeOutCirc'); setInterval(function () {$('#' + id).remove();
}, 4000);
}


Example

Disclaimer: I don't know what Tinder is yet.
Shorter version:

$(document).ready(function () { function addCircle() { var$circle = $('<div class="circle"></div>');$circle.animate({
'width': '300px',
'height': '300px',
'margin-top': '-150px',
'margin-left': '-150px',
'opacity': '0'
}, 4000, 'easeOutCirc');
$('body').append($circle);

setTimeout(function __remove() {
\$circle.remove();
}, 4000);
}

I put the addCircle method inside the closure, keeping the <div> in a variable means there is no need for an ID or counter x and used setTimeout because it only needs to run once.
I like it! Might have made the sizes variable but that could be overkill in this situation. Also it might be a good idea to put a wrapping <div> with position:relative in the case you want multiple of these.