Package detail

Preact Scene.js

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

About Scene.js  /  API  /  Features  /  CodeSandbox Demo

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

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