ani-machine - npm explorer

AniMachine
==========
Declarative Animation and Simple Machine State.
- 4.5KB minified and Gzipped

$3

Optional Dependencies
---------------------
- animate.css
- csshake

How to start
------------
Add JS dependency
``html`

At the end of DOM`html`

Enter Animation --------------- !enter!

Add __data-am__ attribute on DOM element with __":enter"__ special keyword`html

HelloWorld


State
-----
!state

__default__ state is declare with __data-am__`html

	data-am=":on enter :animate pulse
			 :on leave :animate tada">


_Here we define animation on mouseenter and mouseleave_

If you want to declare a __next__ state`html

	data-am=""
	data-am-next=":on enter :animate bounce">


How to change state ?
---------------------
!changestate!

You need to use __":go"__ keyword followed by state name to change state when played animation is finished`html

	data-am=":enter left move 500px :go next"
	data-am-next=":on enter :animate pulse
				  :on leave :animate tada">

How to launch CSS Animation ? --------------------------- Add __":animate"__ keyword followed by animation CSS class name`html

	data-am=":animate tada">


Here we use animate.css class name, but it might be another css class

To chain CSS animation`html

	data-am=":animate tada pulse">


How to launch CSShake Animation ?
---------------------------
!shake!

Add __":shake"__ followed by csshake animation name you want to apply`html

	data-am=":shake slow">


How to trigger animation ?
------------------------
!trigger!

Use __":trigger"__ keyword`html

	data-am-special=":animate bounce
					 :trigger .btn--trigger click">


You can use default event
- click (click 	    event)
- enter (mouseenter event)
- leave (mouseleave event)
- ...
Autostart
---------
By default, all DOM element with __data-am__ attribute will be in __default__ state
Reveal Animation
----------------
Special state name are use to specify animations you want to play when element is entering or leaving the viewport.

You can trigger animation with state __enter__`html

	data-am-enter=":enter left move 500px">


or state __leave__

html
	data-am-leave=":animate bounceOutRight">


Before and After Callbacks
--------------------------

You can bind __":before"__ or __":after"__ callback animation event`html

	data-am-enter=":before beforeFn() :enter left move 500px :after afterFn()">

`html`

> element is DOM element which call the callback

How to add a pause ? ------------------ You can use __":wait"__ to make a pause before running animation or after`html

	data-am-enter=":wait 0.2s :animate pulse">

Release History
---------------
- v0.1.9:
- add :wait operator
- add element as first parameter in before and after callbacks
- remove some old browser compatibility codes
- v0.1.8: remove all dependencies
- v0.1.7: initial revision working with AngularJS

Browser Support
---------------
- IE10+
- Chrome4+
- Safari8+
- FF5+
- Opera12+

License
-------
Copyright (c) 2017 John Fischer
Licensed under the MIT license.