Simultaneous pageIn/pageOut ajax?

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?

In general, algorithm would look like:

  • Send AJAX request
  • When result is received, put it into hidden container and place right behind current container
  • Start fade in / fade out animations

Hi,

I solved it like this:

$.ajax({
        url: ajaxify.ajaxurl,
        type: "post",
        data: {
            action: 'ajax_submit',
            url: url
        },
        dataType: "html",
        success: function(data){
            $('.page-inner').addClass('page-out');
            $('.page-wrap').append('<div class="page-inner page-in"></div>');

            var pageIn = $('.page-in');
            var tlin = new TimelineLite();
            var tlout = new TimelineLite();

            pageIn.html(data);

            tlin.from('.page-in', 0.5, { alpha: 0, onComplete: function(){
                $('.page-inner').removeClass('page-in');
            }});

            tlout.to('.page-out', 0.5, { alpha: 0, onComplete: function(){
                $('.page-out').remove();
            }});
        }
    });

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.