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.
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();
});
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 -
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!
This is:
Specifications
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.
There is also a similarity with this post: https://github.com/michalsnik/aos/issues/624
How can I get this working ?
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.
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 -
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/
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!
Thanks lot. I had solve my problem
Same issue but if I initialize AOS after slick slider then it works fine.
worked for me @romulis