Hi,
Is it possible to animate out a page while the other one is animating in using ajax? In angular this is pretty much standard behaviour when switching between states but how would one archieve this in “regular ajax”?
I have this code atm:
(function($){
$('body').on('click', 'a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
animationFunction();
var ajaxPromise = $.ajax({
url: ajaxify.ajaxurl,
type: "post",
data: {
action: 'ajax_submit',
url: url
},
dataType: "html"
});
var animationPromise = animationFunction();
$.when(ajaxPromise, animationPromise).done(function(data) {
$('#page-wrap').empty().html(data[0]);
TweenMax.to('#page-wrap', 0.35, { alpha: 1 });
});
if(history.pushState) {
history.pushState(null, null, url);
}
return false;
});
function animationFunction() {
var deferred = $.Deferred();
TweenMax.to('#page-wrap', 0.35, { alpha: 0, onComplete: deferred.resolve });
return deferred.promise();
}
})(jQuery);
In my code, the current page first fades out, and then the next one is faded in. Is it hard to adjust so they animate simultaneously?