MIST

Motion Design in Modular CSS

Mist is a motion design library in modular CSS.

Press the button. The color has changed twice? This is implemented in the following code.

Make modular CSS

First, to prepare the style in primitive objects. Style values can be passed a string, number, function. In the case of function like a var vivid, it's evaluated just before, the return value is passed.

Design motion

To build a motion by changing the style with timing control API. on() listen event emission, time() wait milliseconds for delay execution. It's easy to change the style. set() sets modular CSS, clear() clear the set.

Repeat this two-step, to build an interaction. Specification of each API, please refer to the documentation.

Press the button. After the scale, it should be a little rotation. This is implemented in the following code.

Using multiple values

If you want to add to the current style, pass a function like a var rotate. The current style is passed from the first argument.

In combination with the timing control API, you can build complex animations easily, and dynamically.

When you press the button, the color in the order will change. To do this, you need to apply different style in each element.

Targeting each element

If you want to apply different style, you can use some of the style API. setAll() sets modular CSS each element, clearAll() clear the set. When you pass a function to the style value like a var ease, element, index, array of all the elements are passed.

This can be applied to particle effects. However, in order to scan all of the target elements, the performance you need to be careful.

When you press the button, motion is played. Please press the button again while playing, motion will pause. Press again to resume. To do this, you need to control motion.

Control motion

If you want to control motion, you can use some of the timing control API. pause() pause CSS transition and time, resume() resume it. The following code is an example of switching play, pause, resume for each state when clicked.

If you want to synchronize function execution during motion, use the utility. call() call passed function.