Trigger the animation script after an Ajax refresh

Hey @gabriela67,

Can you give us more details on your workflow? Or give us instructions with the link to your page so we could see where they’re not being triggered so we can understand the issue?

Thank you!

Hi,

I use the animation for things other than blocks by manually adding the class “animated fadeIn” to certain elements. In this case it’s a FacetWP listing template that displays projects.

Here is a demo site with the issue: https://soundsolutions.thewire.dev/projects/. The first set of projects is animated properly but if you click the “load more: button at the bottom of the page the next set of projects is hidden because the animation doesn’t work. This is a page that stopped working after recent upgrade.

I could add a script to re-initialize the animation so basically I am looking for something to trigger the animation similar to the jetpack trigger in the code example below:

add_action( 'wp_footer', function() {?>
<script>
document.addEventListener('facetwp-loaded', function() {
fUtil('body').trigger('jetpack-lazy-images-load');
});
</script>
<?php
}, 100 );

Hope this makes sense.

Thank you.

Hey @gabriela67,

For your use case, you will have to add the .o-anim-ready class to all elements that have .animated class after the trigger that you want to tell the browser that they’re ready to be loaded.

Let me know if that makes sense.

Thank you, it worked.

Thank you for confirming!

Best regards,

Andreea