mist.js
TypeScript icon, indicating that this package has built-in type declarations

0.8.9 • Public • Published

MIST

npm version

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


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

Package Sidebar

Install

npm i mist.js

Weekly Downloads

1

Version

0.8.9

License

MIT

Last publish

Collaborators

  • ai428