Help with animating quotes off the page for Quote Generator Project

#1

Evening all,
I’m working on the quote generator and the last piece I’m looking to finish up is getting my quotes to animate on and off the screen. Using animate.css, I’ve been able to get the quotes to animate on the screen no problem, but now the animation off the screen won’t trigger. I’ve done some debugging, and can see that the .quote class does successfully get the “animated” and “flipOutX” classes assigned, but the animation does not show. The quote box just gets removed from the screen. I’ve tried adding delays before and after the animation should be triggered, and also when the HTML would be overwritten, but that didn’t’ have any effect. Is there something going on in the code that I’m not seeing?

Thanks!

#2

Your off screen animation works fine but it’s animating an empty box that’s why you can’t see it. There are several ways to fix it and one of the simplest would be to put the functions that change content of html in the animation’s callback, like this

    $(".quote").addClass('animated flipOutX').one(animationEnd, function () {
        $(".quote").removeClass('animated flipOutX');
        updateColor();
        getJson();
        $("#quoteRow").html("<div class = \"quote col-md-8 col-xs-8\"></div>");
        animateIn();
    });
}

Then your div will ‘wait’ until the animation ends before it gets emptied:)

#3

Thanks for your help! This worked perfectly!

#4