📚 web-animation-club — javascript css animation helpers
WAC is a tiny ~0.8kb javascript library with cross-browser methods to handle CSS ontransitionend and onanimationend events — AKA css animation and transition javascript callbacks.
WAC's onceTransitionEnd method demo
Run the animation to see the callback method in action.
Basic Usage
The onceTransitionEnd method is a cross-browser wrapper on the ontransitionend event and will be called once after the end of the transition.
wac.onceTransitionEnd(element).then((event) => {
// ... do something once the transition has completed
});Where to use it
Use it on every web project that requires controled performant 60fps animations. You can check it in production on the react-awesome-button and react-awesome-slider react components and also on my web developer portfolio :)
HTML/Javascript implementation
When you load it directly into the page you can access the methods through the wac object.
<script src="https://webanimation.club/library/0.1.2/web-animation-club.min.js"></script>
<script>
var element = document.querySelector('.element');
element.classList.add('move');
wac.onceTransitionEnd(element).then(function(event) {
// ... do something once animation has completed
});
</script>Javascript ES6 implementation
Install the web-animation-club package through the NPM Registry via npm install web-animation-club.
import { onceTransitionEnd } from 'web-animation-club';
const element = document.querySelector('.element');
element.classList.add('move');
onceTransitionEnd(element).then((event) => {
// ... do something once animation has completed
});React usage on react-transition-group
Avoid using the default setTimeout for handling animations on Transition/CSSTransition. Instead of using the timeout prop, attach onceTransitionEnd listener through the addEndListener prop.
import { onceTransitionEnd } from 'web-animation-club';
import Transition from 'react-transition-group/Transition';
const Fade = ({ in: inProp }) => (
<Transition
in={inProp}
addEndListener={(node, done) => {
onceTransitionEnd(node).then(done); 👈🏻 👈🏻 👈🏻
}}
>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
I'm a fade Transition!
</div>
)}
</Transition>
);Frame throwing technique - beforeFutureCssLayout
Whenever you need for an css animation or transition to start in a future frame or to skip a couple frames during a timeline coreographed animation. Use WAC's beforeFutureCssLayout to throw the start of the animation N frames into the future.
import { beforeFutureCssLayout } from 'web-animation-club';
const element = document.querySelector('.element');
const frames = 5; // ideally one frame = ~17ms
beforeFutureCssLayout(frames, () => {
element.classList.add('move');
});