Greensock and Ajax

[Jaexplorer]

Hi,
I would like to know how to properly use Ajax with Greensock, as currently i'm failing at it. I have:

Clicks a nav link
var t1 = new TimelineMax();
// An animation that hides the page content and does some page animation
A function call to ajax which will load the content
// Some animation to reveal the loaded content

At the moment as soon as I click a nav link, the content loads immediately by the ajax, then the animation occurs. Any tips?

[Visual-Q]

Pretty hard to know for sure what's wrong just from the description. However if your intention is to call the ajax content after the timeline is finished you probably should do it on an onComplete callback.

 

https://greensock.com/docs/TweenMax/eventCallback

 

or if you want call it inside the timeline at a specified point see

https://greensock.com/docs/TimelineMax/add

 

or

 

https://greensock.com/docs/TimelineMax/call

 

Note also the proper way to pass parameters in the docs so the function doesn't run immediately.

 

I don't do much ajax but I can imagine one potential issue you may have doing this is the ajax loaded content may not be ready when the subsequent animation occurs so you may need to have a way to wait until it is all loaded.

[Jaexplorer]

I got it to work, but by luck. Are you able to explain why this works but this doesn't?

Works:
t1.add(function() {
loadContent(activeClass.getAttribute("value"))
});

Doesn't Work:
t1.add(loadContent(activeClass.getAttribute("value")));

[OSUblake]

42 minutes ago, Jaexplorer said:

Doesn't Work:
t1.add(loadContent(activeClass.getAttribute("value")));

 

You're calling the loadContent function immediately that way. You're basically doing this.

 

loadContent(activeClass.getAttribute("value"));

t1.add(undefined);

 

That's how JavaScript works. It has nothing to do with GSAP.

 

[Jaexplorer]

7 hours ago, OSUblake said:

 

You're calling the loadContent function immediately that way. You're basically doing this.

 

loadContent(activeClass.getAttribute("value"));

t1.add(undefined);

 

That's how JavaScript works. It has nothing to do with GSAP.

 

How am I calling it immediately? It asks for a function, so I give it one. But only accepts a function within a function to work properly.

[OSUblake]

Actually, I don't know what you're giving it because you didn't post any code. A really simple test to see what you're giving it.

 

console.log(typeof (loadContent(activeClass.getAttribute("value"))));

 

 

What does that print out? My spidey-sense tells me it's going to say "undefined" instead of "function". Again, this has nothing to do with GSAP. It's how pretty much every programming language works.

 

This calls loadContent immediately, and becomes whatever calling loadContent returns. If it returns nothing, it's undefined.

 

loadContent(activeClass.getAttribute("value"))

 

 

This is an anonymous function and will be called later.

 

function() {
  loadContent(activeClass.getAttribute("value"))
}

 

 

To summarize, you're giving it the result of a function, and not the function itself.