create-keyframe-animation
Generate CSS keyframe animations dynamically in the browser with JavaScript.
You describe them in JS and it generates and inserts a <style>
in the document <head>
with a CSS keyframe animation.
This lets you dynamically calculate values based on positions and lets you actually run the animations performantly without having to deal with or run requestAnimationFrame
loops.
** caveat ** this is experimental and I'm not entirely sure this is a good idea, nor am I sure I actually want to maintain this lib :) But I'm sharing this here because I thought it was interesting and sharing it for educational purposes. If someone wants to take this and run with it ping me on twitter: @HenrikJoreteg.
DEMO TIME! Here's a fun thing I built with this tool: http://dot.surge.sh
I'll probably write a post about this approach, I think it has some merits. Largely because requestAnimationFrame
loops eat up battery power on mobile devices if left running and it's nice that once you've registered an animation, actually runnning it happens off of the main JS thread. Plus, as I said, you don't have to write CSS with known values ahead of time.
so...
Normally CSS animations are declared in a separate CSS style sheet, like so:
@ 100% }
This can be a bit tedious to write (even with preprocessors) and becomes difficult if you want to dynamically change those fixed pixel values when your app is running in the browser.
What I wanted to be able to do was this:
var animations = // this creates the animation aboveanimations // then run itanimations // it also will return a promise if a `Promise` global exists letting you easily chain animationsanimations
Or we can get fancy and animate other properties that are cheap to animate like, scale and opacity.
Or get extra fancy...
The following is an excerpt from the code in the demo: http://dot.surge.sh/
It creates an animation of two portions, using the element's current translated position as a starting point.
It drop it vertically from its current position then bounces and spin it so it lands on the bottom left corner of the screen.
This is the code used to generate the animation for each of the 5 dots when you hit the "X" to bring the back to the stating position in this demo: http://dot.surge.sh/
{ const x y = const distanceToDrop = wwheight - y // calculate dynamic bounce in animation var fullWidth = wwwidth + 50 var start = x y var c1 = x distanceToDrop var middle = x wwheight - 50 var c2 = fullWidth * 022 distanceToDrop * 075 var end = 20 wwheight - 70 var points = var middle = Math points = points animations}
install
npm install create-keyframe-animation
basic API docs
.registerAnimation(opts)
options and defaults below
opts.name string (required)
The name of the animation. This is what you use when you run it.
opts.animation (object or array)
If you give it an object, they key is the keyframe so all the following are valid and identical:
animations
The positional args are always assumed to be pixels and will be applied using transform: translate3d()
for best performance.
You can also animate the other things that are cheap to animate.
animations
Other options and their defaults
duration: 1000 // duration in milliseconds fillMode: 'both' // css animation fill mode property easing: 'ease' // default easing iterations: 1 // default number of iterations delay: 0 // delay in milliseconds direction: 'normal' // animation direction resetWhenDone: false // if true will apply the final animation state as a `transform` property clearTransformsBeforeStart: false // whether or not to clear any existing transforms before animation starts
.runAnimation(element(s), name string or options object, [callback])
Run animation with the name specified on the nodes you pass in.
Returns a promise if: Promise
exists on the window
object and you don't pass a callback.
element (actual dom node or nodes to apply animation to)
This can be a single element, an array of elements or the result of querySelectorAll
, jQuery should work too, but I don't use it so I haven't tested.
name or options object
If this is a string it's assumed to be the name of the animation to run.
If you set presets
when you registered the animation, you can run them easily:
animations
If you pass an object it has to contain the name:
animations
callback
If you pass a callback it will get called when the animationend
or the browser specific equivalent is called.
credits
If you like this follow @HenrikJoreteg on twitter.
license
MIT