Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Controlling Animation Duration | Core AOS Features
HTML Scroll Animations with AOS

bookControlling Animation Duration

You can control how quickly or slowly an animation plays by using the data-aos-duration attribute on any element that uses AOS. The value you set for this attribute determines the total time, in milliseconds, that the animation will take from start to finish. For example, a value of 400 means the animation will last 400 milliseconds, while 2500 will make it much slower, lasting 2.5 seconds. By increasing the data-aos-duration value, you create a slower, more noticeable animation effect. Decreasing the value makes the animation finish faster. This allows you to fine-tune the visual pacing of your page and highlight important content as users scroll.

question mark

If you want an animation to last longer, what should you do with the data-aos-duration value?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

How do I use the `data-aos-duration` attribute in my HTML?

What are some recommended values for `data-aos-duration` for different effects?

Can you explain how `data-aos-duration` interacts with other AOS attributes?

bookControlling Animation Duration

Pyyhkäise näyttääksesi valikon

You can control how quickly or slowly an animation plays by using the data-aos-duration attribute on any element that uses AOS. The value you set for this attribute determines the total time, in milliseconds, that the animation will take from start to finish. For example, a value of 400 means the animation will last 400 milliseconds, while 2500 will make it much slower, lasting 2.5 seconds. By increasing the data-aos-duration value, you create a slower, more noticeable animation effect. Decreasing the value makes the animation finish faster. This allows you to fine-tune the visual pacing of your page and highlight important content as users scroll.

question mark

If you want an animation to last longer, what should you do with the data-aos-duration value?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 2
some-alt