I have text that I want to be swapped out for a logo once the user scrolls past a certain point. I already have this working
https://jsfiddle.net/ybh22msj/
The issue is that it just swaps the two items. I actually want a nice animation in. Maybe the logo appearing from the top and pushing out the text. I'm not really sure how to achieve this.
JavaScript
$(document).on('scroll', function() {
if($(window).scrollTop()> 200) {
$('#logo2').show();
$('#logo1').hide();
}
else {
$('#logo2').hide();
$('#logo1').show();
}
});