can you provide some example?

Yeah, that is doable with css custom-properties. When I get back coding I'll have a look in how we can provide this.

ahoy!! can I work on that??

@raxraj sadly assigned to @eltonmesquita... ;)

oh! I see, well I will keep trying then.

This didn't make into the v4.0.0 release, but I'll try to prioritize this feature in the next release (probably the next minor version).

@eltonmesquita looking forward!

@wjxniubi Happy to Help :)

@eltonmesquita any news on this? is this relate to our current project?

Nope, I'm pushing this as it's a bit of a laborious task. And no, it should be handled by animate.css.

Yeah, I'd love this.

So classic example is the 'fade up' animation. It has a vertical movement of 100% to 0%. That works great for small elements, like say fading in a title on a marketing website. Lil subtle touch, very nice.

Thing is when you want to go and fade in like a whole block, which is say like 450px tall - suddenly this super subtle animation is crazy huge motion, crazy fast etc. It's just far too much. And the visual consistency across the page changes - they're all moving slightly different speeds. I'm using react-awesome-reveal , which uses animate.css but I think it's something that could be worth looking at for animate.css, not at the library level.

A few ideas for how it could be solved:

Configurable distance
If some animations had a 'distance' prop which could just be any css value and unit. E.g.

:root {
  --animate-distance: ['20px', '100%', '3em', etc ];
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 100%), 0); // fallback value if var isn't set
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

Range of classes
Some libraries probably wouldn't want to pass through a custom prop to inject into the css. A more lo-fi solution could be generating a range of classes for each animation. e.g. Way less flexible though.

@keyframes fadeInTop {  from {  ...   translate3d(0, 100%, 0) }....
@keyframes fadeInTop-50 {  from {  ...   translate3d(0, 50%, 0) }....
@keyframes fadeInTop-25 {  from {  ...   translate3d(0, 25%, 0) }....
@keyframes fadeInTop-10 {  from {  ...   translate3d(0, 10%, 0) }....

Yeah, I'd love this.

So classic example is the 'fade up' animation. It has a vertical movement of 100% to 0%. That works great for small elements, like say fading in a title on a marketing website. Lil subtle touch, very nice.

Thing is when you want to go and fade in like a whole block, which is say like 450px tall - suddenly this super subtle animation is crazy huge motion, crazy fast etc. It's just far too much. And the visual consistency across the page changes - they're all moving slightly different speeds. I'm using react-awesome-reveal , which uses animate.css but I think it's something that could be worth looking at for animate.css, not at the library level.

A few ideas for how it could be solved:

Configurable distance
If some animations had a 'distance' prop which could just be any css value and unit. E.g.

:root {
  --animate-distance: ['20px', '100%', '3em', etc ];
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 100%), 0); // fallback value if var isn't set
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

Range of classes
Some libraries probably wouldn't want to pass through a custom prop to inject into the css. A more lo-fi solution could be generating a range of classes for each animation. e.g. Way less flexible though.

@keyframes fadeInTop {  from {  ...   translate3d(0, 100%, 0) }....
@keyframes fadeInTop-50 {  from {  ...   translate3d(0, 50%, 0) }....
@keyframes fadeInTop-25 {  from {  ...   translate3d(0, 25%, 0) }....
@keyframes fadeInTop-10 {  from {  ...   translate3d(0, 10%, 0) }....

Thanks for the input... we will consider this.

Is this still an issue?

Hi folks, interested with this feature as well here. :)