Target ajax loaded content?

[mattdown]

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

[Diaco]

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() }
        );    
    }
});

[mattdown]

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 :\