mist.js

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