Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jaexplorer

Greensock and Ajax

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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")));

Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

  • Like 4
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.
×