Aos: Not working with slide show

[VienNguyen113]

Hi, thanks for your plugin. It is a nice plugin.
But I have a small issue when I use it with slide carousel. When I put some animations on the first slide they work like a charm. But if I put them in the second slide, they didn't work.
Please help me to fix this issue.
Thank any help :)

[michalsnik]

Hey @VienNguyen113, thanks! Perhaps you have an example that demonstrates this scenario?

[VienNguyen113]

Thank for your feedback @michalsnik .
I have created a js fiddle for this scenario.
https://jsfiddle.net/6Lhdvhd7/1/
Some animation in the second slide didn't work as expected.

[jfuenmayor96]

Hasn't anyone able to fix this issue? I'm having the same problem. The animations only works on the bootstrap slide-item that is marked as active. The other slides don't show any animations.

[VienNguyen113]

I found the other solution. You can call AOS.refresh(true) when event scroll trigger.

[michalsnik]

Trigerring refresh on scroll sounds terrible to be honest and should be omitted. There are probably some hooks in this slider that you can use to call AOS.refresh() in.

Btw. if this would be a simple slider you should use data-aos on slider container, not on those single slides. And if you don't want the container to animate, but only slides inside, then you can always create your own custom animation. There is also data-aos-anchor option, that allows to animate any element based on the position of other element.

[VienNguyen113]

Thanks, @michalsnik this is a good way to solve my this issue.
For my solution above, I only trigger once time by checking class or any other attribute of an Element in slide show.

[andyb1979]

Hey guys! Love AOS, I'm using it on my site: www.scichart.com/wpf-chart-features

I also want to add a slider (slick) with individual AOS elements inside. The first slide is working great but subsequent ones are not.

• I tried to refresh AOS.refresh() or AOS.refresh(true) or AOS.refreshHard() before, during and after a slider scroll event - didn't work.
• Trying now data-aos-anchor but to my understanding the anchor only works on vertical positioning?

Since my carousel is horizontal the elements are already loaded and at the top of page so AOS triggers immediately for hidden slides.

Hence the confusion. Not sure how to solve this.

[andyb1979]

Bit of an update. I tried a few more things, like placing a dummy <div id="BLAH"> into the page and using data-aos-anchor="#BLAH" to trigger when it is on the page.

This works as you scroll but I cannot trigger AOS programmatically by adding or removing the div or changing its position.

Is there any way in AOS to trigger animation inside a div or ID block to start at a certain time?

[andyb1979]

OK. I have a solution. Its dirty and hacky :)

Inside my slider slide I place a <p id="slide-trigger-01" style="position: absolute: top: 1000px; left: 0px;"> element with ID matching the side index. This paragraph has no content and is invisible to the user.

I use the AOS feature data-aos-anchor and data-aos-anchor-placement to trigger animation start when this paragraph with ID slide-trigger-01 is in view.

<p data-aos="fade-up" data-aos-delay="300" data-aos-anchor="#slide-trigger-1" data-aos-anchor-placement="top-bottom" data-aos-duration="1000" >The World's Fastest iOS & Android Charts. Period.</p>

Now in Javascript I use the Slick Slider beforeChange, afterChange event to move this paragraph into position and call AOS.refreshHard();

Moving the P into view and calling AOS.refreshHard() causes AOS slides to re-trigger animations on slider change. A lot of logging in this code but it illustrates the point.

               // Force AOS to refresh on slide changed 
        jQuery('.homepage-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            console.log("Before slide ...");
                        var currentSlideDiv = $(slick.$slides.get(currentSlide));
                        console.log(currentSlideDiv .attr('id'));

                        var slideTrigger = jQuery('#slide-trigger-' + currentSlide);
                        slideTrigger[0].style.setProperty("Top", "1000px");

                AOS.refreshHard();
        });
        jQuery('.homepage-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
            console.log("After slide ...");
                        var currentSlideDiv = $(slick.$slides.get(currentSlide));
                        var slideTrigger = jQuery('#slide-trigger-' + currentSlide);
                        console.log(currentSlideDiv .attr('id'));
console.log('SlideTrigger: ' + slideTrigger);
console.log('SlideTrigger ID: ' + slideTrigger.attr('id'));
console.log('SlideTrigger Style: ' + slideTrigger[0].style);
                        slideTrigger[0].style.setProperty("Top", "0px");

                AOS.refreshHard();
        });

Works!

[Artoo23]

So I am trying to add some aos elements to slides on a swiper object.

I have a updated the swiper init script to include an aos.refresh action but it still doesn't work.

Here is the script - can anyone see what I am doing wrong?

var galleryTop = new Swiper('.gallery-top', { loop: false, keyboardControl: true, simulateTouch: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', effect: 'fade', navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, }); galleryTop.controller.control = galleryThumbs; galleryThumbs.controller.control = galleryTop; galleryTop.on('slideChange', function () { AOS.refresh(); });

[internetstyle]

Here a working demo of Swiper + AOS: https://codepen.io/istyle/pen/ZrPzQj

[weituotian]

@michalsnik is there a more great methods?

[saroj85]

Hey,
Below have a link please open this links and see this code.

https://techkro.in/slick-slider-with-animate-css/

[payam-rsh]

hi,
just add this :
$(window).on('load', function () {
AOS.refresh();
});
$(document).ready(function () {
AOS.init();
}
my problem was fixed with this.