[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!

[wjxniubi]

Hello, I use animate in Vue. But the error has been reported all the time: what's the reason for cannot read property 'prefix' of undefined? Is there a similar solution

[warengonzaga]

@wjxniubi please visit our documentation... https://animate.style/#migration

[wjxniubi]

@wjxniubi请访问我们的文档... https://animate.style/#migration Sorry, I used it for the first time. Some of them still don't understand

[raxraj]

@wjxniubi ! Basically animate.css released a new version namely, v4. Which has a breaking change and thus for now, if you don't want to continue migrating to the latest version just simply change your import statement to

'import 'animate.compat.css';'

or if using HTML, which might be the case in VueJS. Chane the link src as follows

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />

[wjxniubi]

@wjxniubi！ 基本上animate.css发布了一个新版本，即v4。 它具有重大的变化，因此，现在，如果您不想继续迁移到最新版本，只需将您的 import语句更改为

“进口”动画。兼容。css ' ; '

或者使用HTML（在VueJS中可能就是这种情况）。 如下更改链接src

  < link 
    rel = “样式表”
     href = “ https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css ” 
  />

thank

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