Jump to content
Search Community

Timelimes for Ajax loaded content

mattdown test
Moderator Tag

Recommended Posts

I've got a slideout menu that animates the items in as the menu opens using 2 different timelines:

 

// Open menu timeline

open_menu_tl = gsap.timeline({ paused:true });
open_menu_tl.set($main_menu_liner,{autoAlpha:1})
open_menu_tl.from($main_menu,{x:"100%",duration:0.5,ease:'power2.Out'})
open_menu_tl.fromTo('.main-nav li.menu-item a',{autoAlpha:0, x:60},{autoAlpha:1, x:0, duration:0.4, stagger:0.1},"<0.2")
open_menu_tl.fromTo('.bottom-nav',{autoAlpha:0},{autoAlpha:1,duration: 0.5},"<0.7")


// Close menu timeline

close_menu_tl = gsap.timeline({ paused:true });
close_menu_tl.to($main_menu,{x:"100%",duration:0.5,ease:'power2.In'})
close_menu_tl.to($main_menu_liner,{autoAlpha:0,duration:0.35},"<")

 

All works fine on hard page but the contents of the menu area gets reloaded via Ajax during the page transition process.

Once the menu has been reloaded, the items don't animate in anymore due to the DOM elements being refreshed I expect.

Is there anything I can change in these timelines to target the new DOM elements in a more specific way? I've also tried wrapping these timelines in a function that gets refired on Ajax page load but it didn't make any difference either.

Any help / suggestions would be appreciated.

 

Link to comment
Share on other sites

 

Hey @mattdown

 

When the contents of the menu area get reloaded via Ajax during the page transition process, GSAP will probably still be adressing the elements, that you had in there before. And since the timeline was created before those new elements were in the DOM, it didnt know about those elements then.

 

So on transition you probably should kill off the old timeline, and after transition create the timeline from scratch, so it knows what elements need to be adressed now.

 

Here is a little demo to showcase the scenario.

 

If you hit play, then add more elements and click play again, you will see, that only the first element will be tweened.

 

But if you click the kill-button (that also sets up the timeline from scratch) before clicking play again, you'll see, that all new boxes get animated, too.

 

See the Pen f8d928ab0eb2c19227296a76d54e602a by akapowl (@akapowl) on CodePen

 

 

Hope this helps. 

 

  • 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.
×
×
  • Create New...