jfroffice / ani-machine

Declarative HTML Web-Animation and Simple Machine State written in JS / CSS - also works with Animate.css, CSShake

AniMachine

Declarative Animation and Simple Machine State.

• 4.5KB minified and Gzipped

→ Demo ←

Optional Dependencies

• animate.css
• csshake

How to start

Add JS dependency

<script src="../ani-machine.min.js"></script>

At the end of DOM

<script>am.start();</script>

AniMachine CDN

<!-- Non-minified -->
<script src="https://cdn.rawgit.com/jfroffice/ani-machine/v0.1.11/dist/ani-machine.js"></script>
<!-- Minified (recommended for production) -->
<script src="https://cdn.rawgit.com/jfroffice/ani-machine/v0.1.11/dist/ani-machine.min.js"></script>

Change the version tag position in the URL (".../ani-machine/{VERSION}/dist/...") to your desired version.

Enter Animation

Add data-am attribute on DOM element with ":enter" special keyword

<div data-am=":enter left move 500px over 1.0s">HelloWorld</div>

State

default state is declare with data-am

<div class="element"
	data-am=":on enter :animate pulse
			 :on leave :animate tada">
</div>

Here we define animation on mouseenter and mouseleave

If you want to declare a next state

<div class="element"
	data-am=""
	data-am-next=":on enter :animate bounce">
</div>

How to change state ?

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

<div class="element"
	data-am=":enter left move 500px :go next"
	data-am-next=":on enter :animate pulse
				  :on leave :animate tada">
</div>

How to launch CSS Animation ?

Add ":animate" keyword followed by animation CSS class name

<div class="element"
	data-am=":animate tada">
</div>

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

To chain CSS animation

<div class="element"
	data-am=":animate tada pulse">
</div>

How to launch CSShake Animation ?

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

<div class="element"
	data-am=":shake slow">
</div>

How to trigger animation ?

Use ":trigger" keyword

<div class="element"
	data-am-special=":animate bounce
					 :trigger .btn--trigger click">
</div>
<div class=".btn--trigger"></div>

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

<div class="element"
	data-am-enter=":enter left move 500px">
</div>

or state leave

<div class="element"
	data-am-leave=":animate bounceOutRight">
</div>

Before and After Callbacks

You can bind ":before" or ":after" callback animation event

<div class="element"
	data-am-enter=":before beforeFn() :enter left move 500px :after afterFn()">
</div>

<script>
function beforeFn(element) {
	console('before callback');
}
function afterFn(element) {
	console('after callback');
}
</script>

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

<div class="element"
	data-am-enter=":wait 0.2s :animate pulse">
</div>

Release History

• v0.1.11:
  • Moving to webpack
• 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.