Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-scenejs with all npm packages installed. Try it out:

var reactScenejs = require("react-scenejs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-scenejs v1.1.0

A React Component that create JavaScript & CSS timeline-based animation with Scene.js

React Scene.js

npm version

🎬 A React Component that create JavaScript & CSS timeline-based animation with Scene.js.

About Scene.js  /  API  /  Features  /  CodeSandbox Demo


Installation

$ npm install react-scenejs

Make scene

import { Scene, SceneItem } from "react-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

nametypedefaultdescription
cssbooleanfalseCheck to play with CSS
autoplaybooleanfalseCheck to play automatically
keyframesobject{}Specify properties by time.
readybooleantrueCheck if you are ready to init and play.
...optionsCheck out the options
...eventsCheck out Scene's events
Check out SceneItem's events

Development

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

License

MIT License

Copyright (c) 2016 Daybrush
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free