# 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

## 1 Answer

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);
}
addCircle();
setInterval(addCircle, 1200);
});


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.

http://jsfiddle.net/Y3r36/9/

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.

• Ah that's a lot cleaner, I wasn't too sure if it needed the incremental variable or not, since there are multiple elements I wasn't sure if targeting them with animate would of caused problems. Is it necessary to give the timeout function a name like __remove() like you have? – no. Nov 27 '13 at 17:23
• @Joe No. Its a standard I've developed because trying to debug anonymous functions is hard. If you name the function then debugging becomes easier as the stack shows meaningful names. Totally unneeded 99% of the time. – James Khoury Nov 27 '13 at 23:35