aos
aos copied to clipboard
Delay doesn't seem to be working
Bug - The delay, when set on individual items (also when globally adjusted) does not change the delay behavior.
Specifications
- AOS version: AOS@next
- OS: Mac
- Browser: Chrome
Expected Behavior
The delay set on a per container basis should work, but it's being ignored... data-aos-delay="1000" ... for example, does nothing. Same goes if I globally adjust the delay.
Actual Behavior
The delay is ignored and the container comes into view immediately (once scrolled into the section on the page).
Steps to Reproduce the Problem
I'm using a simplified version of animated.css styles (just a couple of the animations) and followed your instructions and added the following when initializing AOS:
In my css, I have: [data-aos] { visibility: hidden; } [data-aos].animated { visibility: visible; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease; animation-timing-function: ease } .fadeIn { -webkit-animation-name: I; animation-name: I } @-webkit-keyframes I { 0% { opacity: 0 } to { opacity: 1 } }
@keyframes I { 0% { opacity: 0 } to { opacity: 1 } }
Thanks in advance!
I was surprised at this as well, but AOS actually defines it's delay using CSS, which means it won't work without the included CSS, and it's limited to a certain threshold. One reason I used wow.js instead, actually:

Same here.