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);
}