1.1.0 • Published 5 years ago
preact-scenejs v1.1.0
Installation
$ npm install preact-scenejs
Make scene
import { Scene, SceneItem } from "preact-scenejs";
const keyframes = {
".circles .circle": (i: number) => ({
0: {
"border-width": "150px",
"opacity": 1,
"transform": "translate(-50%, -50%) scale(0)",
},
1.5: {
"border-width": "0px",
"opacity": 0.3,
"transform": "scale(0.7)",
},
options: {
delay: i * 0.4,
},
}),
};
render() {
return (<Scene
keyframes={this.keyframes}
easing="ease-in-out"
fillMode="forwards"
direcition="normal"
iterationCount={1}
playSpeed={1}
delay={0}
time={0}
css={false}
autoplay={false}
ready={true}
onPlay={e => { console.log(e); }}
onPaused={e => { console.log(e); }}
onAnimate={e => { console.log(e); }}
onTimeUpdate={e => { console.log(e); }}
onIteration={e => { console.log(e); }}
onEnded={e => { console.log(e); }}
>
<div className="circles">
<div className="circle circle1"></div>
<div className="circle circle2"></div>
<div className="circle circle3"></div>
</div>
</Scene>);
}
Props
name | type | default | description |
---|---|---|---|
css | boolean | false | Check to play with CSS |
autoplay | boolean | false | Check to play automatically |
keyframes | object | {} | Specify properties by time. |
ready | boolean | true | Check if you are ready to init and play. |
...options | Check out the options | ||
...events | Check out Scene's events Check out SceneItem's events |
Development
npm start
Runs the app in the development mode. Open ./demo/index.html to view it in the browser.
If you fix it, it will build automatically. Then reload the page.
Bug Report
If you find a bug, please report it to us using the Issues page on GitHub.
License
MIT License
Copyright (c) 2016 Daybrush