Morioh
Login
Dexter Goodwin

Dexter Goodwin

7 months ago

Scene.js: Elevate Web Animation with Dynamic JavaScript Scenes

Scene.js

🎬 Scene.js is an JavaScript & CSS timeline-based animation library.


 

                

🚀 Examples

More Examples

⚙️ Installation

$ npm install scenejs

<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>

📄 Documents

📦 Packages

PackageVersionDescription
react-scenejsA React Component that create JavaScript & CSS timeline-based animation with Scene.js.
svelte-scenejsA Svelte Component that create JavaScript & CSS timeline-based animation with Scene.js.
vue-scenejsA Vue 3 Component that create JavaScript & CSS timeline-based animation with Scene.js.
vue2-scenejsA Vue 2 Component that create JavaScript & CSS timeline-based animation with Scene.js.
@scenejs/renderMake a movie of CSS animation through Scene.js.
@scenejs/effectsEffect collection library where you can add scene effects to Scene.js.
@scenejs/timelineA library that represents the timeline of Scene.js. You can control time, properties, and items.
@scenejs/mediaA library for playing or controlling media with Scene.js.
@scenejs/iframeA library that control the animation of iframe with Scene.js.

🎬 Make Scene

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();

🎬 Add Media (Audio/Video)

This library supports adding video and audio components to your scene. To add a video or an audio, you need to install @scenejs/media library.

Add necessary npm package

$ npm i @scenejs/media

How to use


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);

Please note that this library uses the built-in capability of your browser to play audio and video files. Make sure necessary codecs are installed, and the browser supports the video/audio file being added to the project

✨ Effects

🌐 Supported Browsers

Internet ExplorerChromeFireFoxSafariOpera
9+(10+ playCSS)latestlatestlatestlatest

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

Official Site  /  API  /  Features  /  Examples  /  Main Project

Download Details:

Author: Daybrush
Source Code: https://github.com/daybrush/scenejs 
License: MIT license

#javascript #react #angular #typescript #vue 

Scene.js: Elevate Web Animation with Dynamic JavaScript Scenes
1.60 GEEK