Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
declaration
examples
src
.babelrc
.eslintrc
.npmignore
README.md
index.html
package-lock.json
package.json
tsconfig.build.json
tsconfig.json
tslint.json
webpack.config.js

README.md

react-scenejs npm version

Install

$ npm install react-scenejs  --save

How to use

  • Scene
import { Scene, EASE, EASE_IN, EASE_IN_OUT, bezier, steps, STEP_START, STEP_END } from 'react-scenejs';

const keyframes = {
  0: {opacity: 0, left: "0px"},
  1: {opacity: 0.3, left: "40px"},
  2: {opacity: 1, left: "100px"},
};

<Scene keyframes={{
  item1: {keyframes: keyframes, options: {delay: 0}},
  item2: {keyframes: keyframes, options: {delay: 0.4}},
  item3: {keyframes: keyframes, options: {delay: 0.8}},
}}
iterationCount={1}
easing={EASE_IN_OUT}
css={true}
autoplay={true}
>
  <div className="item" data-scene-id="item1"></div>
  <div className="item" data-scene-id="item2"></div>
  <div className="item" data-scene-id="item3"></div>
</Scene>
  • SceneItem
import { SceneItem, EASE, EASE_IN, EASE_IN_OUT, bezier, steps, STEP_START, STEP_END } from 'react-scenejs';

<SceneItem keyframes={{
  0: {opacity: 0, left: "0px"},
  1: {opacity: 0.3, left: "40px"},
  2: {opacity: 1, left: "100px"},
}}
iterationCount="infinite"
easing={easing.EASE_IN_OUT}
css={true}
autoplay={true}
>
  <div className="item"></div>
</SceneItem>

easing

Props

name type default description
css boolean false Check to play with CSS
autoplay boolean false Check to play automatically
from(SceneItem) object Start properties
to(SceneItem) object End properties
keyframes object Specify properties by time. If not keyframes, use from, to, and duration.
...options Check out the options

Events

The event prefix is on

<SceneItem
  onPlay={this.onPlay}
  onPaused={this.onPaused}
  onAnimate={this.onAnimate}
  onTimeUpdate={this.onTimeUpdate}
  onIteration={this.onIteration}
	>
</SceneItem>