AOS Not Working Properly

Code Help HTML/CSS/JS
1

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:)

2 Likes
3

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.

1 Like
4

You’re welcome buddy!

5

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

1 Like
6

@WindLother Via the HTML.

7

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.

2 Likes
8

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

9

Wait, you didn’t initialize the AOS too.

image

2 Likes
10

IMG_1834
IMG_18342160×1620 394 KB

I did initialize AOS.

2 Likes
11

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.

12

What do you mean?

13

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
14

@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?

15

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

1 Like
16

@WindLother Hi! It’s been a while! Do you have any idea how I could set up this?

17

Oh hey there!

Tbh it would be something that I have to take a little time to study since I’m no longer programming in front-end.

I have the rough idea in my head but still is a bit complicated which would require some testing too.

This is a rough idea, I really don’t know if this will work:

document.addEventListener('DOMContentLoaded', function() {
  // You get the current window width
  var width = window.innerWidth;

  //Than you define the AOS settings for different widths
  if (width <= 600) { // For example, this can be for mobile devices
    AOS.init({
      offset: 200, 
      duration: 1000
    });
  } else if (width > 600 && width <= 900) { // And you make a condition for tablets too
    AOS.init({
      offset: 300,
      duration: 1200
    });
  } else { // Else for just, you know, desktops
    AOS.init();
  }
});
18

Thanks! What really is offset in AOS?

19

It’'s a parameter that determines the position where the animation should start.

For example, if an element has an offset of 500, the animation will be triggered when the element is 500 pixels away from the bottom edge of the visible part of the screen.

1 Like
20

@WindLother Ahh I see. I thought it was something else. Thank you. Removing offset fixed my problem.

21

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.