What is Mithril.animate?

A tiny library that allows you to declaratively bind animations to your mithril elements via model properties. They work in all modern browsers, and have the ability to fall back to using jQuery.animate (optional). The intention is to allow you to create neat UI animations that react to your model properties, however don't expect to be able to make a floating 3D periodic table, (at least not out of the box)..

Using it

To use an animation, you can bind a property to control it:

m.e("div", { opacity: o.ani }, "I can fade away");

Where "o.ani" is a property on your model - simply toggle between 0 and 1 to fade in and out!

You can also bind events to animate, for example:

m.e("div", { onclick: m.trigger('opacity', 0), "I also fade away");

Where "0" is the value you want opacity to become when you click.

Note: the recommended approach is to bind to a property - as this makes it easy to react to the state of your data. For example if the user performs an action to delete an item, it makes sense to fade the opacity of the item to 0.

Trigger syntax - transition animation

Transition animations can be triggered with a value or property, options and a callback.

Where:

• NAME - the name of the animation
• VALUE/PROP - an optional value or model property you want to pass to the animation being triggered
• OPTIONS - an optional object containing one or more options
• CALLBACK - a function that will be run when the animation is complete

Trigger syntax - keyframe animation

Keyframe animations only take a name and options, as they are much more static.

Where:

• NAME - the name of the animation
• OPTIONS - an optional object containing one or more options

Property animations

There are bindings included for all standard animatable properties: backgroundColor, backgroundPosition, borderBottomColor, borderBottomWidth, borderLeftColor, borderLeftWidth, borderRightColor, borderRightWidth, borderSpacing, borderTopColor, borderTopWidth, bottom, clip, color, fontSize, fontWeight, height, left, letterSpacing, lineHeight, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, opacity, outlineColor, outlineWidth, paddingBottom, paddingLeft, paddingRight, paddingTop, right, textIndent, textShadow, top, verticalAlign, visibility, width, wordSpacing, zIndex

CSS3 animations

You can also animate using the following CSS3 animation bindings:

Binding	Description
translate(x, y)	Move element x across, y down
translatex(x)	Moving element x across
translatey(y)	Moving element y down
scale(x, y)	Changing the elements width by x and height by y
scalex(x)	Change the elements width by x
scaley(y)	Change the elements width by y
rotate(angle)	Rotate the element by angle ('deg' or 'rad')
skew(x-angle, y-angle)	Skew the element across by x-angle and down by y-angle ('deg' or 'rad')
skewx(x-angle)	Skew the element across by x-angle ('deg' or 'rad')
skewy(y-angle)	Skew the element down by y-angle ('deg' or 'rad')

Timing function

You are able to specify a timing function to direct how your animation is run, default is 'ease'

Function	Description
ease	Slow start, then fast, then end slow again (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear	Same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in	Slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out	Slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out	Slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

Custom animations

You can add custom animations that can animate multiple properties on your element all at once.

Binding syntax

Where:

• NAME - the name of your binding as you refer to it in the view (must be unique)
• FN - A function that takes the mithril property that is bound to the animation and returns the properties and values to be animated
• OPTIONS - an optional object containing one or more options.

Option	Description
property	What properties to animate, default is "all"
timingFunction	Which timing function to use - one of the listed functions, default is "ease"
delay	If you want a delay before the animation runs, default is "0"
duration	How long the duration of the animation is - default is "400ms", you can specify it in seconds, using the postfix: "s", or in milliseconds, using the postfix: "ms" (default, if no postfix is specified)

Here is an example to rotate and fade the opacity in one go, with a default duration of 2000ms and a linear timing function:

Custom keyframe animations

You can add custom keyframe animations that can animate multiple properties on your element all at once, in several steps. Keyframe animations are static, and so do not have a function or a proprty.

Binding keyframe syntax

Where:

• NAME - the name of your binding as you refer to it in the view (must be unique)
• OBJ - An object with percentages as keys and values are properties with their respective values to be animated
• OPTIONS - an optional object containing one or more options, see table above for details.

Here is an example to make a box "floop" around a little:

FAQ