Scene.js

repository·master·Indexed 25 days ago

A JavaScript and CSS timeline-based animation library for creating complex animations by defining property changes over time. It includes a core engine and a wide ecosystem of integration packages for React (react-scenejs), Svelte (svelte-scenejs), Vue 3 (vue-scenejs), and Vue 2 (vue2-scenejs), as well as specialized extensions for media control (@scenejs/media), rendering (@scenejs/render), effects (@scenejs/effects), and iframes (@scenejs/iframe).

Tokens: 13.3K
Snippets: 43
Records: 96
Agent score: 83%

What's inside scenejs

Install react-scenejs
master
Install the react-scenejs package via npm to use Scene.js timeline-based animations within your React applications.
```
$ npm install react-scenejs
```
https://github.com/daybrush/scenejs/blob/master/packages/react-scenejs/README.md
Install svelte-scenejs
master
To use Scene.js within a Svelte application, install the svelte-scenejs package via npm.
```
$ npm install svelte-scenejs
```
https://github.com/daybrush/scenejs/blob/master/packages/svelte-scenejs/README.md
Install vue-scenejs
master
Install the vue-scenejs package via npm to use Scene.js animations within your Vue 3 application.
```
$ npm install vue-scenejs
```
https://github.com/daybrush/scenejs/blob/master/packages/vue-scenejs/README.md
Install vue2-scenejs
master
Install vue2-scenejs via npm. If you are using a Vue version earlier than 2.7, you must also install @vue/composition-api.
Note: For Vue 2.7 or higher, it is recommended to use the vue-scenejs package instead.
```
$ npm install vue2-scenejs
$ npm install @vue/composition-api
```
https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/README.md
Install Scene.js
master
You can install Scene.js via npm or include it directly in your HTML using a script tag.
```
$ npm install scenejs
```
```
<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>
```
https://github.com/daybrush/scenejs/blob/master/README.md
Configure vue2-scenejs with Vue 2
master
To use vue2-scenejs, you must register the @vue/composition-api plugin in your Vue instance.
```
import Vue from "vue";
import VueCompositionAPI from '@vue/composition-api';

// @vue/composition-api is required to use vue2-scenejs
Vue.use(VueCompositionAPI);
```
https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/README.md

Add Audio and Video to a scene

master

Scene.js supports media via the @scenejs/media package. You must install the package, create a MediaScene instance, configure your media (seek, volume, speed, delay), and then add it to your main scene using setItem.

$ npm i @scenejs/media

import MediaScene from '@scenejs/media';

const mediaScene = new MediaScene();
    mediaScene
        .addMedia("background", "./background.mp3")
        .seek(0, 40.79);
    
    mediaScene
        .addMedia("video", "./video.mp4")
        .seek(0, 40.79)
        .setVolume(1)
        .setPlaySpeed(1)
        .setDelay(startTime);

    scene.setItem("video", mediaScene);

Create animations in Vue 3 with vue-scenejs

master

Use the provided composables from vue-scenejs to bind Scene.js timeline animations to Vue template styles.

Key composables include:

useScene: To manage the scene instance.
useSceneItem: To interact with specific items in the scene.
useFrame: To access frame-based data.
useNowFrame: To get the current frame's CSS properties (e.g., cssText) for real-time style binding.

<script>
import {
    useScene,
    useSceneItem,
    useFrame,
    useNowFrame,
} from "vue-scenejs";

export default {
    setup() {
        const scene = new Scene({
            "a1": {
                0: {
                    left: "0px",
                    top: "0px",
                    transform: `translate(0px, 0px)`,
                },
                1: {
                    left: "100px",
                    top: "100px",
                    transform: `translate(100px, 0px)`,
                },
            },
            "a2": {
                0: {
                    left: "0px",
                    top: "0px",
                    transform: `translate(0px, 0px)`,
                },
                1: {
                    left: "100px",
                    top: "100px",
                    transform: `translate(100px, 0px)`,
                },
            }
        });
        const { cssText: cssText1 } = useNowFrame(scene.getItem("a1"));
        const { cssText: cssText2 } = useNowFrame(scene.getItem("a2"));

        return {
            cssText1,
            cssText2,
        };
    },
};
</script>
<template>
<div class="container">
    <div class="a1" :style="cssText1"></div >
    <div class="a2" :style="cssText2"></div >
</div >
</template>

Create a Scene in a Vue 2 component
master
Use the useNowFrame hook from vue2-scenejs to bind Scene.js animation properties to your Vue template. This allows you to apply dynamic CSS styles (like left, top, or transform) to elements based on the current timeline frame.
https://github.com/daybrush/scenejs/blob/master/packages/vue2-scenejs/README.md

Create a basic animation scene

master

To create a scene, import Scene and instantiate it with an object defining your animation timeline. You can use CSS selectors to target elements and define property changes at specific time markers. Setting selector: true in the options allows you to use CSS selectors as keys.

import Scene from "scenejs";

const scene = new Scene({
  ".class": {
    0: "left: 0px; top: 0px; transform: translate(0px);",
    1: {
      "left": "100px",
      "top": "0px",
      transform: "translate(50px)",
    },
    2: {
      "left": "200px",
      "top": "100px",
      transform: {
        translate: "100px",
      },
    }
  }
}, {
  selector: true,
  easing: "ease-in-out",
}).play();

Create a scene with Scene.js
master
To create a scene, instantiate the Scene class. You provide a timeline object where keys represent time steps (0, 1, 2, etc.) and values represent the properties to animate. You can use CSS selectors to target elements.
Common options include:
- selector: Set to true to enable using CSS selectors for targeting elements.
- easing: Defines the easing function (e.g., "ease-in-out").
Call .play() to start the animation.
```
import Scene from "scenejs";

const scene = new Scene({
  ".class": {
    0: "left: 0px; top: 0px; transform: translate(0px);",
    1: {
      "left": "100px",
      "top": "0px",
      transform: "translate(50px)",
    },
    2: {
      "left": "200px",
      "top": "100px",
      transform: {
        translate: "100px",
      },
    }
  }
}, {
  selector: true,
  easing: "ease-in-out",
}).play();
```
https://github.com/daybrush/scenejs/blob/master/README_CN.md

Create a Scene in Svelte

master

You can create timeline-based animations in Svelte by using svelte-scenejs hooks.

Define a Scene object with keyframes for different items.
Use the useNowFrame hook to get the current frame's CSS properties for a specific scene item.
Bind the returned cssText store to the style attribute of your Svelte elements.

Available hooks include useScene, useSceneItem, useFrame, and useNowFrame.

<script>
import {
    useScene,
    useSceneItem,
    useFrame,
    useNowFrame,
} from "svelte-scenejs";


const scene = new Scene({
    "a1": {
        0: {
            left: "0px",
            top: "0px",
            transform: `translate(0px, 0px)`,
        },
        1: {
            left: "100px",
            top: "100px",
            transform: `translate(100px, 0px)`,
        },
    },
    "a2": {
        0: {
            left: "0px",
            top: "0px",
            transform: `translate(0px, 0px)`,
        },
        1: {
            left: "100px",
            top: "100px",
            transform: `translate(100px, 0px)`,
        },
    }
});
const { cssText: cssText1 } = useNowFrame(scene.getItem("a1"));
const { cssText: cssText2 } = useNowFrame(scene.getItem("a2"));


</script>
<div class="container">
    <div class="a1" style={$cssText1}></div
    <div class="a2" style={$cssText2}></div
</div>