AOS not working with tabs and sliders

michalsnik / aos

Animate on scroll library

MIT License

26.92k stars 2.6k forks source link

AOS not working with tabs and sliders #683

Open deepakranga1801 opened 3 years ago

deepakranga1801 commented 3 years ago

This is:

Question

Specifications

AOS version: 2.3.1
OS: win 10
Browser: chrome

Detailed Description

AOS not working with tabs and sliders

kotreshvg commented 3 years ago

i'm facing same problem aos works only if the component is inside the first active tab, if the component is inside other tabs it fails to animate.

Ellf commented 3 years ago

It works for me in a slider. Are you sure it's not just animating before you change to another tab or does the element not appear at all therefore the animation is not triggered?

kotreshvg commented 3 years ago

I have the problem when AOS is used in tabs that are other than active when the website loads initially. Example. Consider a website has 3 tabs. When the website loads assume it shows 1st tab content. AOS works fine in that 1st tab. If i use AOS in 2nd or any other tab, it won't animate if i move to that tab. But the block displays properly.

On Sat, 17 Jul, 2021, 3:30 PM Tom Lorimer, @.***> wrote:

It works for me in a slider. Are you sure it's not just animating before you change to another tab or does the element not appear at all therefore the animation is not triggered?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michalsnik/aos/issues/683#issuecomment-881870617, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATVMQWQE52OP2AROR4OMQ5LTYFIDHANCNFSM45XHAG2Q .

Luk164 commented 3 years ago

Same. Does anyone have a workaround?

thietnguyen1106 commented 3 years ago

I tried with Aos.init(); Aos.refresh(true); Aos.refreshHard(); data-aos-anchor=".other-element". But everything is not working.

Until I found this: https://stackoverflow.com/questions/51768579/how-to-make-aos-not-working-with-slick-slider

note:

The idea is that you remove the class 'aos-animate' all elements where you set animations on all tabs of the slide, except the current tab.
Then when the tab switch event on the slide is fired (automatically or manually) add the 'aos-animate' class to the elements that need animations on the current tab, and remove it on the remaining tabs.
You can try this right in the browser. After your animations are done press F12 then find the element you have set animations in the Elements tab. Find and remove the class 'aos-animate', then add it again. You will see the animations run again.

asinpark123 commented 9 months ago

I have the same issue.

I thought it'd be a possible solution by putting AOS.refresh() into onClick property of each of the the tab buttons, but after clicking on another tab the y axis of animation trigger points gets messed up, and upon clicking back into the default active tab, it stays messed up.

Would be really great to hear any possible solutions/workarounds to this issue!