Skip to content

dmitrykuzmenkov/animation-kit

Repository files navigation

#animation-kit Animation KIT for you website using CSS

Notice. Animation KIT is optimzed to use with webpack.

Demo

You can try animations online here: http://dmitrykuzmenkov.github.io/animation-kit/

Installation

Use npm to install package

npm install animation-kit

Usage

First you must require installed npm package and pass to it animated dom element to catch animations.

Import needed less styles for your animation

@import 'node_modules/animation-kit/src/main.less';
@import 'node_modules/animation-kit/src/attention/bounce.less';

Then select DOM element using query selector for example and manage animation on it following this example:

var animation = require('animation-kit');
var element = document.getElementById('my-dom-element');
animation(element)
  .animate('bounce')
  .start(function (e) {
    console.log('Animation started');
  })
  .iteration(function (e) {
    console.log('Animation iteration');
  })
  .end(function (e) {
    console.log('Animation end');
  })
;

Pay attetion you need to require used animated styles too.

Methods

animate(animation, opts)

  • animation - name of animation to perform
  • opts - object with options
    • keep - keep element state after animation is done (default: false)
    • infinite - loop animation infinitly (default: false)

start(cb)

  • cb - callback that will be called after animation start

end(cb)

  • cb - callback that will be called after animation finished

iteration(cb)

  • cb - callback that will be called on animation iteraction

Animation list

All animation has dash (-) notation in names. Keyframes for animation has camelNotationName.
Here is full list of supported CSS animation name that you can use in animate function

  • bounce
  • flash
  • hatch
  • head-shake
  • jello
  • pulse
  • rubber-band
  • shake
  • swing
  • tada
  • wobble
  • boing-in-up
  • boing-out-down
  • bomb-out-left
  • bomb-out-right
  • bounce-in-down
  • bounce-in-left
  • bounce-in-right
  • bounce-in-up
  • bounce-in
  • bounce-out-down
  • bounce-out-left
  • bounce-out-right
  • bounce-out-up-animation
  • bounce-out
  • fade-in-down-big
  • fade-in-down
  • fade-in-left-big
  • fade-in-left
  • fade-in-right-big
  • fade-in-right
  • fade-in-up-big
  • fade-in-up
  • fade-in
  • fade-out-down-big
  • fade-out-down
  • fade-out-left-big
  • fade-out-left
  • fade-out-right-big
  • fade-out-right
  • fade-out-up-big
  • fade-out-up
  • fade-out
  • flip-in-x
  • flip-in-y
  • flip-out-x
  • flip-out-y
  • flip
  • lightspeed-in
  • lightspeed-out
  • rotate-in-down-left
  • rotate-in-down-right
  • rotate-out-down
  • rotate-out-left
  • rotate-out-right
  • rotate-in-up-left
  • rotate-in-up-right
  • rotate-in
  • rotate-out-down-left
  • rotate-out-down-right
  • rotate-out-up-left
  • rotate-out-up
  • rotate-out-up-right
  • rotate-out
  • perspective-in-down
  • perspective-in-left
  • perspective-in-right
  • perspective-in-up
  • perspective-out-down
  • perspective-out-left
  • perspective-out-right
  • perspective-out-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-in-up
  • slide-out-down
  • slide-out-left
  • slide-out-right
  • slide-out-up
  • space-in-down
  • space-in-left
  • space-in-right
  • space-in-up
  • space-out-down
  • space-out-left
  • space-out-right
  • space-out-up
  • swash-in
  • swash-out
  • swap
  • twister-in-down
  • twister-in-up
  • hinge
  • hole-out
  • magic
  • puff-in
  • puff-out
  • roll-in
  • roll-out
  • vanish-in
  • vanish-out
  • tin-in-down
  • tin-in-left
  • tin-in-right
  • tin-in-up
  • tin-out-down
  • tin-out-left
  • tin-out-right
  • tin-out-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-in-up
  • zoom-in
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right
  • zoom-out-up
  • zoom-out