Jump to content
GreenSock

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

playing timeline within function

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

hi!

i am trying to make ajax page change with jQuery address plugin (http://www.asual.com/jquery/address/) and it works fine. you can see working example of that technique here: http://www.feeldubrovnik.com.

i wanted to add some page transition animations with GSAP, so i declared timelines outside the function in which i am trying to call them from, but something i did wrong. here's the (simplified) code:

$(function(){
//...
// declaring timeline 
var tl_home = new TimelineMax({paused:true});
tl_home.fromTo($("#home_logo"), 1.2, {scale:.2, rotation:45, autoAlpha:0}, {scale:1, rotation:0, autoAlpha:1, ease:Back.easeOut});
tl_home.staggerFrom($(".feature_box"), .8, {scale:.1, autoAlpha:0, ease:Back.easeOut, transformOrigin:"50% 50%"}, 0.2, "-=0.9");
//...
$.address.change(function(event) {
//...
switch(currPage.name) {
   case 'home':
      // calling timeline within function
      tl_home.play();
      break;
   case 'about':
      tl_about.play();
      break;
}
//...
});
});

i think that it has some scope issue, but i can't figure it.

when i declare timelines within 'switch' it works just fine.

please tell me what am i doing wrong.

 

tnx in advance.

Link to comment
Share on other sites

Hello imezei, and Welcome to the GreenSock Forum!

 

I am a little confused on the behavior you are seeing. I do have some additional questions:

  • What is the wrong thing you are seeing?
  • Does the animation not play?
  • Does the animation stop playing?
  • Is your change event handler firing?
  • What does your CSS look like?
  • What does your HTML looke like?
  • Do you have the latest version of GSAP loaded?
  • Are you trying to use callbacks in GSAP?

If possible could you please provide a limited codepen demo example that can shwo us what you are trying so we can better help you. ;)

 

Here is a video on How to create a codepen demo example by GreenSock. The more info you provide can help us in helping you find a solution.

 

Thank You :)

Link to comment
Share on other sites

hi, jonathan!

thanks for your reply.

 

well, i cannot provide codepen demo because my code load content via ajax (same thing i done with http://www.feeldubrovnik.com/ but without GSAP animation)

 

but, i've figure what is wrong with my code:

content is dynamically loaded into page via ajax, so timelines won't play if elements are created (inserted) into DOM after timeline declaration.

 

so i make it this way:

wait for elements to load into DOM, then declare timeline and play it.

do i need to kill it after playing (because, it must be declared every time content is loaded into DOM)?

Link to comment
Share on other sites

You could make your event handler using the jQuery on() method so it listens fo changes in the DOM that happen within the document. This way if your DOM changes, your on() event handler will listen for changes below the document:

// jQuery on() method requires jQuery 1.7 and above
$(document).on("change", $.address, function(event) {
 ..
});

:

Try this:

$(function(){
//...
// declaring timeline 
var tl_home = new TimelineMax({paused:true});
tl_home.fromTo($("#home_logo"), 1.2, {scale:.2, rotation:45, autoAlpha:0}, {scale:1, rotation:0, autoAlpha:1, ease:Back.easeOut});
tl_home.staggerFrom($(".feature_box"), .8, {scale:.1, autoAlpha:0, ease:Back.easeOut, transformOrigin:"50% 50%"}, 0.2, "-=0.9");
//...

// using on() method and binding to the document
// jQuery on() method requires jQuery 1.7 and above
$(document).on("change", $.address, function(event) {
//...
   switch(currPage.name) {
      case 'home':
         // calling timeline within function
         tl_home.play();
         break;
      case 'about':
         tl_about.play();
         break;
   }
//...
});
});

:

Does this help? :)

Link to comment
Share on other sites

Jonathan is correct.

 

Additional information (below jQuery 1.9) :

 

I recommend jQuery.live() :

$("#elementToWatch").live('click', callFunction);

Live keeps watching for specific selector in the future.

 

PS. If you use jQuery.on(), use instead of $(document).on the most nearby parent because of performance.

 

I think these giving solutions will fix the problem, because we mentioned the XHR.

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.

×