"data-aos-delay" not working when using animate.css with aos.js and not working with all zoom related animate.css animation.

[skwebs]

This is:

• Bug
• Question

Specifications

• AOS version:3.0.0 beta.6
• OS: Android
• Browser: Google Chrome

Expected Behavior

I want to add animation delay with "data-aos-delay" but it not working when I using animate.css while working it fine with default animation (aos.css). And another problem is all zoom related animate.css animation appearing and immediately disappeared while with wow.js it working properly.

Actual Behavior

When I using animate.css with aos.js then data-aos-delay does not work. While with default animation aos.css working it fine. I want aos.js work fine as like wow.js especially with zoom related animate.css animations. I want to use aos.js instead wow.js because wow.js does not support reanimation while aos.js support it but it has some problems with animate.css. So please improve it.

Steps to Reproduce the Problem

I created a codepen on this problem.

1. "data-aos-delay" not working with animate.css.
2. zoom related animation of animate.css does not animate as like real animation.

Detailed Description

Codepen links below: AOS with Animate.css not working "data-aos-delay".

AOS default working fine "data-aos-delay" with aos.css.

Possible Solution

[simondoescode]

Did you find a solution?

You could use this in your main scss file. The key is changing transition-delay to animation-delay. I presume animate.css changed transition's to animation's

[data-aos] {
  visibility: hidden;
}

[data-aos].animated {
  visibility: visible;
  pointer-events: auto;
}

[data-aos] {
  @for $i from 1 through 60 {
    body[data-aos-delay='#{$i * 50}'] &,
    &[data-aos][data-aos-delay='#{$i * 50}'] {
      animation-delay: #{$i * 50}ms;

      &.aos-animate {
        animation-delay: #{$i * 50}ms;
      }
    }
  }
}

[aat-antoine]

It seems there is the same trouble with transition-duration instead of animation-duration

[data-aos] {
  @for $i from 1 through 60 {
    body[data-aos-duration='#{$i * 50}'] &,
    &[data-aos][data-aos-duration='#{$i * 50}'] {
      animation-duration: #{$i * 50}ms;
    }
  }
}

I guess this issue could be handle by the library.