How to change HTML AOS delay value using javascript or CSS

Question

First time seeking help on here, hoping there is a simple answer for this. I am using AOS - Animate on Scroll library in my website and I want to be able to change the aos delay value based on the screen width as I need different delay times depending on screen size.

Is it possible to call the below “1300” value something like “number” and then have that value changed by media queries in either CSS or javascript?

        <div class="skill" data-aos="fade-in" data-aos-delay="1300">
            <div class="icon-container">
                <img src="images/pencilruler.gif" alt="">
            </div>
            <h1>Graphic Design</h1>
            <p>
                Custom designs for screen and print. From logo designs and corporate branding, to adverts and packaging.
            </p>
        </div>

I have have had no luck finding a solution to this. I tried using getElementById() in javascript but could only manage to change the content of the div and not a value within it.

At the moment my workaround (below) is to have duplicate divs for each delay length and then by using ‘display:none;’ I can remove the unneeded ones based on screen size. This is a real pain and a bit messy as there is quite a few delay variations that I want.

  @media screen and (max-width : 419px){
   .skill-desktop{
    display:none;
    }
  }

Appreciate any help or ideas.

score 2 · Accepted Answer · answered Nov 05 '20 at 08:59

2

Like Hugo Elhaj-Lanhsen anwsered you can change the data attributes. I would like to add how to do that depending on the viewport size, using Window.matchMedia and MediaQuery.addListener() in JavaScript.

const mqList = window.matchMedia("(max-width: 419px)")
// If media query matches on load
if (mqList.matches) {
    setDelay(400) // using Hugo's function
}
// If media query matches after resize
mqList.addListener(function(mql) {
    if (mql.matches) {
        setDelay(400) // using Hugo's function
    }
})

And make sure to add the HTML viewport meta tag so the viewport is the size of the device.

<meta name="viewport" content="width=device-width, initial-scale=1">

answered Nov 05 '20 at 08:59

touchmarine

1,548
9
11

Thanks so much. This works really well. Is it also possible to alter the data-aos="fade-in" attribute using the same method? Gave it a go like this but no luck so far:
function setFade(skillfade) { document.querySelector('.skill').setAttribute('data-aos', skillfade) } const mqList = window.matchMedia("(max-width: 419px)") if (mqList.matches) { setFade(fade-left) }
– tjurie Nov 06 '20 at 20:55
Yes, it should work. You can set basically any attribute with `.setAttribute()`. In your comment you are not passing a string to the `setFade` function, maybe you just wrote it incorrect in the comment, but it should be `setFade("fade-left")` instead of `setFade(fade-left)`. – touchmarine Nov 07 '20 at 09:18
Ahh yes. All working now. Thanks again for your help. – tjurie Nov 08 '20 at 23:54

score 1 · Answer 2 · answered Nov 05 '20 at 08:37

Attributes

In HTML, the key-value pairs like class="name" are known as attributes. class, style and src are examples of attributes.

Attributes prefixed with data- are known as data attributes. Data attributes, unlike normal attributes which are defined in HTML directly, can be defined by the programmer. This is why your library uses a data attribute in order to set the delay.

Changing attributes

To set an attribute's value, you can use Element.setAttribute(name, value). In this case, we would get the element and set its data-aos-delay data attribute:

function setDelay(number) {
  document.querySelector('.skill').setAttribute('data-aos-delay', number)
}

Thanks Hugo. This was really helpful. – tjurie Nov 06 '20 at 21:00 — tjurie, Nov 06 '20 at 21:00

How to change HTML AOS delay value using javascript or CSS

2 Answers2

Attributes

Changing attributes