This package has been deprecated

Author message:

no long supported. Use react-scenejs with preact/compat, preact/hooks

preact-scenejs
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Preact Scene.js

npm version

🎬 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

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

Package Sidebar

Install

npm i preact-scenejs

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

51.1 kB

Total Files

26

Last publish

Collaborators

  • younkue