clapperboard
v1.0.5
Published
Easily set frames to create an animation rendered from an object (like the state of a react component).
Downloads
1
Readme
clapperboard
Easily set frames to create an animation rendered from an object (like the state of a react component).
Rationale
I found React to be a simple way of rendering an animation—whether svg or simple HTML.
With clapperboard, it is simple of scheduling updates to the React component state or props to animate it.
Installation
Using npm:
npm i --save clapperboard
Usage with react
Simple example of animating a browser:
import animator from 'clapperboard';
import React from 'react';
import ReactDOM from 'react-dom';
class BrowserAnimation extends React.Component {
render() {
return (<div className="browser-animation">
<div
className="browser-animation__cursor"
style={{
top: this.state.cursor.y.toString() + '%',
left: this.state.cursor.x.toString() + '%'
}}
/>
<div className="browser-animation__top-bar">
<span className="url">{this.state.url}</span>
</div>
<div
className="browser-animation__document"
style={{
backgroundImage: `url(${this.state.currentPage})`,
backgroundPosition: `0 -${this.state.scrollPosition}px`
}}
>
</div>
</div>);
}
}
var component; // Render BrowserAnimation and store it here.
var initialState = {
cursor: {
x: 40,
y: 20
},
url: 'https://acme.com/',
currentPage: 'homepage'
};
component.setState(initialState);
const timeline = [
['+1', 'cursor.y', 50],
['+0.5', 'cursor', {x: 10, y: 15}],
['+0.2', 'url', 'https://acme.com/sign_up', 'type'],
['+0.1:signUpPage', 'currentPage', 'sign_up'],
['=', 'scrollPosition', 0],
// ... all the frames here
];
const [stop, onEnd] = animator(initialState, timeline, function (obj) {
component.setState(obj);
});
API
Frames
The timeline consists of a list of frames. Each frame is a list of the following: time
, property
, change
, method
.
time
The time is in one of these formats:
+N
(whereN
is a float number of seconds): Frame will be executedN
seconds after the previous change is complete=
: Frame will be executed at the same time as the previous one
Frames can further be 'tagged':
timingInfo:frameName
(ex+1:pageChanged
): The frame will be named and will be referenceable asframeName
.=frameName
: The frame will be executed at the same time asframeName
.frameName+N
(whereN
is a float number of seconds): The frame will be executedN
seconds afterframeName
's change is completed.
These can be combined, so that sessionStart+5:sessionEnd
is a valid time.
property
This will be the property of the master object to be changed, in dot format.
change
This is what the property will be changed to.
method
Method can be left empty or be type
, in which case the change will be "typed" and not immediate. This is useful to simulate user
input.
animator
function
The animator function will need to be called with:
initialState
: the object frames will apply changes toframes
: the list of framescallback
: a function to call after each change. It will be called with the changed object as only argumentinfinite (optional)
: set to false to only run the animation once
It will return a function stop
which you can use to stop the animation.
Big disclaimer
I'm pretty sure this stuff works, but not 100% sure. I have extracted it from an old project as I needed it again. You're welcome to submit improvements as you see fit.