Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

choojs/nanoanimation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

16 Commits

Repository files navigation

nanoanimation

npm version build status downloads js-standard-style

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

MIT

About

πŸ‘¨β€πŸŽ¨ - Safety wrapper around the Web Animation API

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /