playing timeline within function

[imezei]

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.

[Jonathan]

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

[imezei]

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)?

[Jonathan]

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?

[BPolak]

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.

[imezei]

BPolak, thank you, i will try. See this below:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). (http://api.jquery.com/live/)