Problems revealing data-aos Zoom-in items when Slick slider is on the same page

This is:

• Question

Specifications

• AOS version: latest version
• Slick slider latest version
• OS: All
• Browser: Firefox and others

Expected Behaviour

When scrolling down the page divs holding images should appear!

Actual Behavior

When Slick slider is on the page nothing is shown. As soon as the Slick slider is disabled the AOS.js items are working as expected. Problem is even more urgent in Firefox than in Chrome.

Steps to Reproduce the Problem

this is the live working example: below the banner there should open up 3 rows with images. http://testnl10.vini4all.nl/ n the page: http://testnl10.vini4all.nl/toepassingen/glazuur should reveal images beside the text in te 2columns down the page.

1. in the divs which need to reveal
2. AOS.init(); in my js -settings
3. tried some settings which were mentioned here: https://github.com/michalsnik/aos/issues/155#issuecomment-514591450 but they did not help. Making all menu, etc. open up and all the slides visible.

There is also a similarity with this post: https://github.com/michalsnik/aos/issues/624

How can I get this working ?

[hocomadvies]

After going through the issues raised here, I came to this solution which seems to work for me. Now it is working fine in my development environment. Next lets see how it works with the live version of the site.

$(window).on("scroll", function () {
	 AOS.init();
 });

[hocomadvies]

Although this works very well. I found a small problem in Firefox. I have a menu anchor link with a href to /#contact_form to show the contact-form which is on the bottom of the homepage. When the menu is clicked from other pages than the on the homepage, the anchor #contact is shown a second and than the page is reloaded or scrolled to the point where the Aos.js is applied... So the on scroll might be activated by the anchor /#contact_form ? If already on the page, than is works as intended. Also when you are in "inspection mode" it works... - what are they doing over there at fire fox? Used to be better -

[hideyasu2015]

You had better using another library like this one This can use in Bootstrap carousel. https://bootstrapthemes.co/item/bootstrap-carousel-touch-slider-with-text-animation/

[Sm0ove]

After going through the issues raised here, I came to this solution which seems to work for me. Now it is working fine in my development environment. Next lets see how it works with the live version of the site.

$(window).on("scroll", function () {
	 AOS.init();
 });

Thanks alot for this hint, after many hours of debugging and fiddling around with the display/opacity/visibility styles and even applying the data-attributes with JS, this event handler did the trick!

[omarpervezz]

Thanks lot. I had solve my problem

[romulis]

Same issue but if I initialize AOS after slick slider then it works fine.

[Asmer72582]

worked for me @romulis