aos inside bootstrap modal

[JorgeMendozaG]

Hi, How can I animate elements inside a bootstrap modal? I set the data-aos like other elements on the page (those are working fine), but inside the modal, nothing happens.

Thanks!

[Teksetta]

I don't think you can. I've run into a similar problem. I think the animation is based on the scroll of the window and not a selected container. I'm investigating to see where the change needs to happen. This might need to be a feature to target what containers to watch for when scrolling.

[jonatasu]

@JorgeMendozaG maybe you should use the "Animate.css". If it don't work, you'll have to write some JS to add the "animate.css" classes to all elements you wanna animate. If you need, I can help you with that.

[Nezunoban]

@Teksetta is correct. I just ran into a similar issue. I'm going to try a workaround, because for my navigation I need to declare "overflow-y: auto" on a div, and to do that is to set the window scroll to the div and not the whole page.

So what I'm going to try to do is to adapt @pojka's workaround for the same issue with wow.js and use the isInViewport plugin to also add the animate class. It may be madness as I'm very young in my javascripting, but here goes . . .

[Nezunoban]

Don't think I'm going to be able to get it to work as isInViewport has a very different way of detecting scroll location than AOS, and I'm just going to go with a different navigation because AOS is preferable to some other things I want to do.

[dlewand691]

Ran across this using the Foundation framework. Found a fix the mostly works:

$('[data-reveal]').on('closeme.zf.reveal', function() {
    $('#targetedID *').removeClass('aos-animate');
});

The 'closeme' event fires just before the modal is opened. The 'aos-animate' class is removed then immediately re-added and fires the animations.

https://www.dannylewandowski.com/_cog-DEV/_PROTOTYPING/Components/_BUILD/Pardot.html

[RichmondBautista]

This might help.

I disable AOS before showing modal then reenable soon after.

My code look like this.

$(window).on("shown.bs.modal", function() {
AOS.init({disable:true});
});

$(window).on("hidden.bs.modal", function() {
AOS.init({disable:false});
});

Happy coding 😁