aos mobile issue

[rehamwael]

Hi thanks for the lovely animation plugin
I disabled AOS on mobile using this

disable: 'mobile'

but still the UI broken with me all sections comes together when I scroll to the bottom

[michalsnik]

Hey @rehamwael. Can you please provide more information? What device are you using and which browser? Also what does it mean UI is broken? Can you create example codepen/sandbox or at least put some screenshots? It would be really helpful. Right know my hands are tight ;/

[VinnyMo]

Maybe unrelated, but I have also noticed some small issues in Safari on iOS. Specifically using the "flip" right and left animations. One "flipping" element seems to break the display of other elements to some extent. Unfortunately, I'm unable to get a screenshot as the issue fixes itself after the animation is complete and the user scrolls (or takes a screenshot).

[michalsnik]

I updated animations in demo/index.html and opened it on ios' safari, but it works fine. Can you provide link to the page that you experience the problem on @VinnyMo ?

[Elzeka]

The issue is related to the translate property in fade-left transitions... this is pulling space to right on mobile and let you scroll...

Screen of Issue

I found a solution to this: applying a fixed position to the initClass
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation

so in your stlye must apply ".aos-init:not(.aos-animated){ position:fixed} and that's all.

EDIT: .aos-init:not(.aos-animate):after{ position:fixed}
Because the script needs to map the position where needs to create the animation

[djneill]

@Elzeka Where did you apply this fix at, I have the same issue on mobile screens.
I added this to my CSS and to each aos div, but the mobile pages are still blowing out to the right similar to your screenshot.
CSS
.aos-init:not(.aos-animate):after {
position: fixed;
}
HTML
< div class="aos-init" data-aos="zoom-in-up" data-aos-duration="3000" >

[michalsnik]

You might need to set overflow-x: hidden on body - it should solve the problem with content pulling space on sides. This duplicates the following issues: #234 #73 #227
v3 is still in beta, but I'll create a FAQ section there to address cases like this.
If you're experiencing any other issues on mobile please create new issue with detailed explanation and examples.