Jump to content
GreenSock

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

Target ajax loaded content?

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 all,

Firstly, loving greensock as it's cutting down my animation dev time considerably and the amount of support on these forums is outstanding.

Have run into my first problem with it though.

 

My tweens are working fine on a hard page load (it's a woocommerce product archive page), but as soon as I start using the Ajax product filters, they stop working. Kinda expected I guess as the DOM is being restructured after the filters have worked.

Here's the pen:

 

When you hover over the blue boxes, they just slide down to reveal a Div underneath

 

Usually I can overcome this in jQuery by using the '.on' method such as:

 

$(document).on('hover','*selector*',function(){

  ..... other code in here

});

... But I can't work out how I can integrate a failsafe method like that into my GSAP code.

Any help would be greatly appreciated.

 

Cheers

Matt

See the Pen mVKxBq by mattdown247 (@mattdown247) on CodePen

Link to comment
Share on other sites

Hi mattdown  :)

 

you just need to define tweens after appending new Dom elements .

i don't know what's your code , after appending new elements you can check for  element.animation like this  :

 

$(".product-details-swap").each(function(index, element){
    if( !element.animation ){ // check for element.animation
        var tl = new TimelineLite({paused:true});
        // add tl tweens
        element.animation = tl;
        $(this).hover( 
            function(){ this.animation.play() },
            function(){ this.animation.reverse() }
        );    
    }
});
  • Like 5
Link to comment
Share on other sites

Thanks for the help so far.

Changing my code to this reworked version didn't solve the problem though.

I ended up wrapping the tween code in a new function which then get called on page load and again inside an 'ajaxComplete'... so it ended up like:

$(document).ajaxComplete(function(){

... name of function that wrapped the tween code

});

There is probably still a more efficient way of doing it though. I'm open to suggestions :\

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.

×