Jump to content
GreenSock

Evan S

Ajax success - wait until animation finishes

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm using ajax to load data within a specific div and I have some animations in the ajax's beforeSend event but they cannot complete as the ajax success event loads the next data in the div.

 

Is there any way to wait for the animations to finish on beforeSend and then load the new data?

 

My scenario is:

  • navigation changes (click event)
  • current data in page has outro animations
  • loading spinner appears
  • after new page finishes loading
  • new data in the page appears with intro animations

 

Almost everything is working but the new page loads before the outro animation finishes.

 

Any tips would be very helpfull.

 

thanks

Link to comment
Share on other sites

Hello Vagskou, and welcome to the GreenSock Forum!

 

You could check out the jQuery.ajax docs: https://api.jquery.com/jQuery.ajax/

 

You might want to look into queuing your ajax requests :

 

Sequencing ajax requests

Queue ajax requests using jQuery.queue()

 

Also take a look at this:

 

jQuery.Deferred

deferred-object

 

Some jQuery plugin that manage ajax queues:

 

https://code.google.com/p/jquery-ajaxq/

http://codecanyon.net/item/ajax-queue-jquery/full_screen_preview/4903957

http://schneimi.wordpress.com/2008/03/10/multiple-ajax-requests-problems-and-ajaxqueue-as-solution/

 

It would really helpful to see some code so we can see your issue in context. Could you please look at this video tut by GreenSock describing how to create a codepen demo example.

 

This way we can better help you, Thanks :)

Link to comment
Share on other sites

Thanks for the reply and the links. I'll definately read these articles.

 

I'm using HTML5 history and everything is triggered when the URL changes. I've made everything to work but there is a part that I don't like. I think my solution is a little bit dirty. I'm not very experienced :-)

 

I'm not using the ajax beforeSend anymore. I couldn't find a way to wait for the animations to finish and then load the new content. So instead

  • I have an outro sequence,
  • Then I load with ajax the new elements,
  • I hide the new content (this is what I don't like)
  • Reveal everything (intro sequence)

 

My code so far:

$window.bind('statechange',function(){
	
	sequenceOut();

	function sequenceOut(){
		tl.to("#main", 1, {scaleY:"0",  ease:Power4.easeInOut});
		tl.to("#bg-img", 1, {opacity:"0", ease:Power4.easeInOut}, "-=1.0");
		tl.call(loadPage);		
	}

	function sequenceIn(){
		// hide specific elements when new page loads
		tl.to("#bg-img", 0, {opacity:"0"});
		tl.to("#main", 0, {scaleY:"0"});	    		
		
		// reveal elements sequentially
		tl.to("#bg-img", 1, {opacity:"1", ease:Power4.easeInOut});
		tl.to("#main", 0.8, {scaleY:"1",  ease:Power4.easeInOut}, "-=0.8");		
	}		


	function loadPage(){
		// ajax loads and callbacks here
		success: calls the sequenceIn function
	}
	
});

The part that I don't like is that I have to hide some elements by default after the ajax load and then reveal them again with timeline animations. Any suggestions would be very welcome.

 

Thanks again.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×