[feature request] Configurable magnitude

[chriscconte]

It would be cool if there were a helper class to determine the magnitude of the motion, this could be very useful for smaller elements!

[warengonzaga]

can you provide some example?

[eltonmesquita]

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

[raxraj]

ahoy!! can I work on that??

[warengonzaga]

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

[raxraj]

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

[eltonmesquita]

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).

[warengonzaga]

@eltonmesquita looking forward!

[raxraj]

@wjxniubi Happy to Help :)

[warengonzaga]

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

[eltonmesquita]

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

[EliotSlevin]

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) }....

[warengonzaga]

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.

[BeepBot99]

Is this still an issue?