AOS Not Working Properly

Question:
I am using AOS to make on-load and on-scroll animations to further enhance my site, but on small screens such as small tablets and phones, certain parts of my website do not show up on the screen, but if I remove AOS from these certain parts of my website, they show up. Why is AOS not working and how can I fix it?

Repl Link: Estus on Replit

BTW, thank you so much @WindLother for introducing me to AOS (I felt I never thanked you properly :slight_smile:)

1 Like

I don’t understand.
For one, I’ve only create 2 themes: one because I like the color blue and one because I was bored.
Secondly, this topic is not at all related to themes.
And finally, I was talking about AOS a library to make things animate on-scroll.

You’re welcome buddy!

I could not see any AOS in your styles.css, how r u adjusting their settings?

@WindLother Via the HTML.

Where??

I couldn’t see any <style> tag too.

Also, keep styles like AOS separeted from the HTML. So I would recommend transitioning to AOS configuration to the CSS.

1 Like

On the AOS website, it says I just have to add data-aos properties to the HTML tags.

Wait, you didn’t initialize the AOS too.

image

1 Like


I did initialize AOS.

1 Like

Strange, I tried to ctrl+f and it didn’t show anything. My fault.

So, backing to your problem you can either disable AOS for small screens or use responsive AOS offset.

What do you mean?

I think you will make it better looking online, I do know how to disable the AOS for small screens but I can’t get on the top of my head how to make the AOS Offset responsive (as it is more complicated).

Oh, by responsive I mean that the AOS will be responsive to small phones and tablets.

1 Like

@WindLother Does this mean disabling AOS entirely? Or just making it more mobile-compatible?

If it means making it more mobile-compatible, how would I do this?

Whichever you want, I guess. WindLother said “either”

1 Like