Performance Improvement Hints (will-change)

[klopfdreh]

Hi,

I just read an article at developers.google.com about a new property which might improve the performance of the animations provided via animate.css.

So maybe it would be good "tell" the browsers what you are planing to do. Example:

.fadeInLeft {
   will-change: transform, opacity;
}

References:

• https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance?hl=en
• http://caniuse.com/#feat=will-change

[klopfdreh]

If this has any relevance for you I may create a pull request and take over the work.

[klopfdreh]

To free the required resources we could also add a keyframe at 100% and set will-change back to auto

@keyframe myFrame{
   100%{
      will-change: auto;
   }
}

See Examples: https://developer.mozilla.org/en/docs/Web/CSS/will-change - auto is used to removeHint.

[klopfdreh]

Hi,

I change the behavior a bit, because as of the spec: https://www.w3.org/TR/css-will-change-1/

will-change should be applied a short time before the animation actually starts. So what to do now is:

1. Create your element with an so called animation hint: <effectname>Hint (fadeInRightHint)
2. Add your Animation via the corresponding class with jQuery or other frameworks

You can let away the hint - then the animation is handled like before. Here are the states:

During the page rendering

<div class="fadeInRightHint">...</div>

On event (scroll, hover or what ever)

<div class="fadeInRightHint fadeInRight animated">...</div>

The hint can be removed on event but I think it is not required because the keyframe overrides it.

[tnga]

interresting is it ; but with your second implementation approch it can make the animate.css usage too verbose.

[klopfdreh]

Well the hint is optional, so if you don't need a better performance you can let them away. If you face performance issue you can use them. It has to be a class for each animation, because every animation is using different css properties to be changed and because of the spec it should used wisely - that is the reason why I defined them for each animation class.

[equinusocio]

@klopfdreh You have to put will-change before the animation starting (in this case on another class), so the only CSS solutions is to tell users how to use the will-change property. I think the README file is a good place.

[klopfdreh]

@equinusocio : It is always <animation_name>Hint as you can see in the commit

[eltonmesquita]

I've got to agree with @equinusocio here. It'll probably confuse more than help the beginner users and it has a potential to harm performance or even cause browser crashing (run out of GPU memory).
I do think it has a well deserved place in documentation. Please, see #681.