material-motion-runtime
v1.0.0
Published
The core architecture for Material Motion.
Downloads
8
Maintainers
Readme
Material Motion Runtime for JavaScript
Declarative motion: motion as data
This library does not do much on its own. What it does do, however, is enable the expression of motion as discrete units of data that can be introspected, composed, and sent over a wire.
This library encourages you to describe motion as data, or what we call plans. Plans are committed to a runtime. A runtime coordinates the creation of performers, objects responsible for translating plans into concrete execution.
Usage
import { Runtime } from 'material-motion-runtime';
const runtime = new Runtime();
const element = document.getElementById('some-element');
runtime.addPlan({
plan: new ImaginarySpringPlan({
propertyName: 'translateX',
destination: 100,
}),
target: element,
});
See also the Runtime specification in the Starmap.
API
To encourage code readability, we follow the named arguments pattern: each function takes a single object literal. Internally, we destructure that object to read a function's arguments.
Runtime
new Runtime()
isActive
true
if any of the known performers have indicated that they are active.
addPlan({ plan, target })
- The runtime will find a performer to handle the given plan. If there's already an instance of that performer operating on a target, it will be passed the plan. If not, one will be created and then passed the plan.
addActivityListener({ listener })
- The provided listener will be called each time
runtime.isActive
changes.isActive
will be passed to the listener. It will not be called untilisActive
changes. listener({ isActive })
- The provided listener will be called each time
removeActivityListener({ listener })
- The provided listener will no longer be called when
isActive
changes.
- The provided listener will no longer be called when
Installation
yarn add material-motion-runtime