MIST

Motion Design in Modular CSS

Mist is a motion design library in modular CSS

Quick start

npm install mist.js --save

Or download

Features

• Using Modular CSS
• Using Style Tag
• Timing Control

TL;DR demo, site

Supported browser

• Chrome
• Edge
• Firefox
• IE
• Safari

Usage

Make modular CSS

var vivid = {
  background: () => `hsl(${Math.random() * 360}, 50%, 50%)`
}

Design motion

mist('div')

  // set color, wait 1s
  .set(vivid).time(1000)

  // set color, wait 1s
  .set(vivid).time(1000)

  // clear style
  .clear();

Repeat this two-step, to build an interaction

mist( statement ): new

param | type --------- | ---------------------------- statement | selector string, element new | new mist

New instance

API

• Selector

  • any
  • not

• Using Modular CSS, Style Tag

  • clear
  • clearAll
  • set
  • setAll

• Timing Control

  • on
  • pause
  • resume
  • time

• Utility

  • call

any( selector ): new

param | type -------- | ---------- selector | string new | new mist

Same as :any, :matches selector

not( selector ): new

param | type -------- | ---------- selector | string new | new mist

Same as :not selector

clear(): self

Clear modular CSS

clearAll(): self

Clear modular CSS each element

set( ...css ): self

param | type ------- | --------------------------------------------------- css | { "name": string }, { "name": (now) => string }

Set modular CSS

setAll( ...css ): self

param | type ------- | --------------------------------------------------------------- css | { "name": string }, { "name": (element, i, all) => string }

Set modular CSS each element

on( name ): promise

param | type ------- | --------------------- name | string promise | see

Listen event emission

pause(): self

Pause CSS transition, time

resume(): self

Resume CSS transition, time

time( dur ): self

param | type ------- | --------------------- dur | milliseconds number

Delay execution

call( responsor ): self

param | type --------- | ------------ responsor | () => void

Call passed function

Using promise

This library's promise like a Promise / A+, it's extended functions

resume()

The fullfilled or rejected promise back to pending

var emission = mist('div').on('click');

emission.then((e) => {

  // your process

  emission.resume();
});

when( success, err? ): promise

param | type ------- | ------------------- success | (response) => any err | (response) => any

If you want to reuse callback function, to use

mist('div').on('click').when((e) => {

  // your process
});

License

MIT © AI428