choojs / Nanoanimation
Licence: mit
👨🎨 - Safety wrapper around the Web Animation API
Stars: ✭ 73
Programming Languages
javascript
184084 projects - #8 most used programming language
nanoanimation
Safety wrapper around the Web Animations API. Allows animations to safely be defined in Node, and browsers that don't support the Web Animation API. Default behavior is to do nothing.
Usage
var animation = require('nanoanimation')
var css = require('sheetify')
var html = require('bel')
css('tachyons')
var el = html`
<div class="bg-red h5 w5" onclick=${() => move.play()}>
Hello planet
</div>
`
var keyFrames = [
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
]
var timingProperties = {
duration: 1000,
fill: 'forwards'
}
var animate = animation(keyFrames, timingProperties)
var move = animate(el, function () {
console.log('event ended')
})
document.body.appendChild(el)
API
animate = animation(keyFrames, timingProperties)
Create a new animation.
WebAnimation = animate(el, [done])
Apply an animation to an element, calls done
when finished. Returns the
nativate Web Animation object.
See Also
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].