Skip to content

Instantly share code, notes, and snippets.

@maburdi94
Created April 19, 2018 04:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maburdi94/ffbacb7afd8d424bfb3301598c54de04 to your computer and use it in GitHub Desktop.
Save maburdi94/ffbacb7afd8d424bfb3301598c54de04 to your computer and use it in GitHub Desktop.
NodeList prototype extension for WebAnimations (w/ stagger option)
interface AnimationOptions {
stagger?: number;
}
NodeList.prototype.animate = function(keyframes: AnimationKeyFrame | AnimationKeyFrame[], options: number | AnimationOptions) {
const elements: HTMLElement[] = Array.prototype.slice.call(this);
(function next(elements: Array<HTMLElement>) {
if (elements.length < 1) return;
setTimeout(() => {
elements[0].animate(keyframes, options);
// call next() recursively
next(elements.slice(1));
}, typeof options =="object" ? options.stagger : 0);
})(elements);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment