Last active
April 22, 2018 20:30
-
-
Save MikeDigitize/5707dcdc0c83f1c7436406bea904e913 to your computer and use it in GitHub Desktop.
Web Animation challenge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Write a wrapper around the Web Animations API | |
// takes a HTML element upon creation | |
// constructor exposes the HTML element, a `keyframe` array of keyframe objects and a `config` object | |
// the `keyframe` array has a minimum length of 2 (animation start and end), can't start an animation unless satisfied | |
// each object in the `keyframe` array has a CSS property and value with an optional `offset` property (between 0 - 1, for keyframe %) | |
// the config object specifies duration, easing and iterations | |
// exposes an `addKeyFrame` and `removeKeyFrame` method to modify the `keyframe` array | |
// exposes a `setAnimationProperties` method that allows you to set values only on duration, easing and iterations keys on config object | |
// exposes an `animate` method that starts the animation | |
// when called, the `animate` method returns an object that has | |
// play, pause and cancel methods to control the element's animation | |
// the wrapper should first test that animations are available in the browser | |
// then test if the Web Animations API is available | |
// if animations are available but the Web Animations API is not, a fallback must be provided | |
// consider using the CSSOM to provide the fallback |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment