Scene.js - Library to Create Timeline-Based Animation

  •        0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

Scene.js is a JavaScript timeline-based animation library for creating animation websites. As an animated timeline library, it allows you to create a chronological order of movements and positions of objects.

In addition, Scene.js is easy to use and convenient because its grammar is similar to CSS animation and it supports both JavaScript and CSS play methods. In the text, I will detail the main features of it.

You can control multiple elements at the same time
Animated elements are difficult to control because the start and end times of an animation are different.

Scene.js can control multiple animation elements at the same time and can be replayed even if the start and end times are all different.

It also gives you complete control over time so you can accurately show your movement about the current time.
It is easy to use by transforming CSS grammar

Scene.js is similar to how CSS uses Keyframes and allows CSS properties to be used as they are. So, those who have used CSS animation can easily use it. Here is the CSS Keyframes code.

  .animate {
     animation-name: keyframes1;
     animation-duration: 4;
     animation-iteration-count: 3;
     animation-timing-function: ease-in-out;
  @keyframes keyframes1 {
     0% {
        left: 0%;
     50% {
       left: 50%;
      100% {
        left: 30%;
However, CSS animations can be uncomfortable, with relative time (%) written and long names and no custom functions available. So Scene.js improved:
Use absolute time (s) instead of relative time (%)
CSS animation uses a relative time (%) based on 100%. If you know how long the animation is going on in advance, it’s easy to write in %, but it may take more or less time to write than expected. Each time, the relative time is inconvenient. But Scene.js uses an absolute time (s), so you don’t have to think about that inconvenience.
 new Scene({
    ".animte": {
       0: {
          left: "0%",
       2: {
          left: "50%",
       4: {
          left: "30%",
 }, {
    selector: true,
    iterationCount: 3,
    easing: "ease-in-out",

Support for cross-browsing and omit animation property prefix

Properties related to animation include the prefix animation-. Also, the name is longer because you must even attach vendor prefixes (-webkit-, -moz-, -o-) to support cross-browsing.

 /* CSS */
   .selector {
       animation-name: a;
       animation-duration: 3s;
       animation-timing-function: ease;
       -webkit-animation-name: a;
       -webkit-animation-duration: 3s;
       -webkit-timing-function: ease;
       -moz-animation-name: a;
       -moz-animation-duration: 3s;
       -moz-timing-function: ease;
    @keyframes a {
      0% {
         transform: translate(0px);
      100% {
         transform: translate(100px);
  @-webkit-keyframes a {
     0% {
        -webkit-transform: translate(0px);
    100% {
        -webkit-transform: translate(100px);
  @-moz-keyframes a {
    0% {
       -moz-transform: translate(0px);
    100% {
       -moz-transform: translate(100px);

Scene.js can omit prefixes for properties related to animation. And because it supports cross-browsing, three attributes animation, transform, and keyframes can be omitted from the vendor prefix.

  /* Scene.js */
    new Scene({
       ".selector": {
        0: {
            transform: {
            tranlsate: "0px",
        1: {
           transform: {
           tranlsate: "100px",
  }, {
     duration: 3,
     easing: "ease",

It is convenient to support both JavaScript and CSS play methods

Scene.js supports both JavaScript and CSS play methods. This means that you can use any play method to express the same animation. However, the advantages of both languages are different, so it is recommended that you choose them for your purpose.

Here are the advantages of playing an animation with JavaScript:
  • Interaction and Intercontrol: Sometimes animation requires dynamic changes through interactions such as mice, keyboards, browsers, and other DOM events. Because it is difficult to control with static CSS animation, Javascript animation must be used.
  • Supports attributes that cannot be expressed in CSS: HTML, DOM Attributes cannot be implemented as CSS and some properties are not supported by the browser. Internet Explorer does not support CSS animation, and SVG animation has very limited browsers that support CSS animation. In this case, you must use JavaScript animation

The advantage of CSS animations boasts better performance than JavaScript animation. Because JavaScript animations run on the main thread, the animation may look tricky if you have a lot of processing. However, CSS animations can look much smoother because they work on different threads.

So, can I use CSS properties and formats in Scene.js? Because it is a Javascript library, CSS properties and formats cannot be used as they are, but Javascript format similarly implemented as follows:
Supports various value types

The CSS properties support a variety of types and are converted to values for calculation within the browser. Scene.js can also handle different types of JavaScript by replacing conversion that is done inside the browser.
number: It must be a number to do the calculation.

string(number + unit): In some cases, 10px, 10%, 10em, etc. are strings with numbers and units. In this case, numbers are calculated by dividing the number and unit. (However, the units must be the same.)

color: It supports color models such as hex, rgb(a), and hsl(a). All are replaced by rgba and calculated as the numeric value of rgba.

string: The string cannot be calculated, indicating the first value before the time is 1 and the second value when it reaches 1.

Provides the easing used by CSS.
easing(timing-function) changes the rate of progress. You can give a sense of speed to animated elements, such as a fast-paced first and a slow-paced last.
Scene.js provides as constants the easing supported by CSS and can show the same look no matter how JavaScript and CSS play. You can also create and use your own easing even if it is not supported by CSS.
 /* CSS Easing */
    easing: Scene.EASE_IN, // EASE_OUT, EASE_IN_OUT, ...
  /* Custom */
    easing: t => 1 - Math.pow(t, 3),

Supports various effect presets.

Even if you’re a library that makes CSS animation easy to write to, either, you might not know CSS. Some may be more familiar with animation effect names than CSS attribute names. @scenejs/effects uses CSS attributes to preset popular animations to help make writing easier.
The following are effect presets provided by Scene.js:
transition helps to make the transition between scenes as shown in the next demo.

Supports the React, Angular, Vue, and Preact frameworks.

Scene.js supports key frameworks. Using the correct syntax of each framework makes it easier than just using it.

There is no limit to what you can create with this library. You can create simple animations and complex scene animations, and there are also a variety of projects using them.
Codes and projects can be found on GitHub.
To use with npm or script, run the following command:
npm install scenejs
<script src="//"></script>


I'm Front-End Engineer with JavaScript, CSS, TypeScript, Node.js. I like animations and I like to make animations. I also have JavaScript, CSS lectures and presentations. I teach JavaScript, CSS, and even give presentations at conferences. I am currently working on an open source project under the name Daybrush.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter

Related Articles

Best open source Text Editors

  • text-editor editor tools dev-tools

Text editors are mainly used by programmers and developers for manipulating plain text source code, editing configuration files or preparing documentation and even viewing error logs. Text editors is a piece of software which enables to create, modify and delete files that a programmer is using while creating website or mobile app.In this article, we will discuss about top 7 all-round performing text editors which is highly supportive for programmers.

Read More

Getting Started on Angular 7

  • angular ui-ux front-end-framework

Angular is a platform for building responsive web, native desktop and native mobile applications. Angular client applications are built using HTML, CSS and Typescript. Typescript is a typed superset of Javascript that compiles to plain Javascript. Angular core and optional modules are built using Typescript. Code has been licensed as MIT License.

Read More

Desktop Apps using Electron JS with centralized data control

  • electronjs couchdb pouchdb desktop-app

When there is a requirement for having local storage for the desktop application context and data needs to be synchronized to central database, we can think of Electron with PouchDB having CouchDB stack. Electron can be used for cross-platform desktop apps with pouch db as local storage. It can sync those data to centralized database CouchDB seamlessly so any point desktop apps can recover or persist the data. In this article, we will go through of creation of desktop apps with ElectronJS, PouchDB and show the sync happens seamlessly with remote CouchDB.

Read More

COVID19 Stats using Angular Material Design

  • angular material-design covid covid-stats

Material design is inspired from the real world building architecture language. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. In this article, we will build COVID stats using Angular Material design.

Read More

Ngnix - High Performance Web Server, Proxy Server, Content Cache and Reverse Proxy

  • load-balancer proxy-server web-server

Nginx is a High Performance Web Server, Proxy Server, Content Cache and Reverse Proxy server. It can also be used as mail proxy server and a generic TCP/UDP proxy server. Nginx claims to be more efficient and faster in the Web space compared to the other web servers. This can be evident with the architecture which is based on asynchronous event-driven approach. The event driven architecture enables to scale to hundreds / thousands of concurrent connections.

Read More

Leaflet and Keyhole Markup Language (KML)

  • leaflet kml maps

Leaflet, a open-source JavaScript library for interactive maps. It is a well-documented API and extended with lot of plugins. It is also designed with simplicity, performance and usability.

Read More

An introduction to web cache proxy server - nuster

  • web-cache proxy-server load-balancer

Nuster is a simple yet powerful web caching proxy server based on HAProxy. It is 100% compatible with HAProxy, and takes full advantage of the ACL functionality of HAProxy to provide fine-grained caching policy based on the content of request, response or server status. This article gives an overview of nuster - web cache proxy server, its installation and few examples of how to use it.

Read More

Angular Service Workers Usage Guide

  • angular service-worker offline-app

Web developers come across scenarios like web application completely breaks when workstation goes offline. Likewise to get into our application, every time we need to open a browser and then access it. Instead if it is in app, it will be easy to access for end-user. Push notifications similar to email client need to be done through web application. All these are addressed by a magic called service worker.

Read More

Top 10 AI development tools which you should know in 2020

  • artificial-Intelligence neural-networks frameworks

It is a fact the 2020 is not going the way we expected to be but when it comes to technology breakthrough we can say 2020 will be the heir of greatness. <br />Speaking of technical breakthroughs we have got artificial intelligence which is known to be taking over the mankind like a wildfire. Everything around us is connected through AI be it shopping travelling or even reading. Every other activity of ours is transforming into a whole new extent.

Read More

New Open Source Web Browser Engine from Google and Mozilla

  • browser browser-engine

Web Browser engine used to render the page from HTML, CSS and Javascript. The browsers are one of the most important tool to view the web and it is must have software in Desktop and Mobile. These new browsers will take advantage of tomorrow’s faster, multi-core, heterogeneous computing desktop and mobile architectures.

Read More

SeoToaster: easy, fast and efficient open source CMS for top SEO performance

  • cms content-management-system seo ecommerce

SeoToaster is a free Open Source CMS & Ecommerce solution to build, manage and market websites optimized for for top search engine performance. As the name implies, Seo Toaster is to date the only content management system (CMS) to truly integrate SEO execution and web marketing automation technology in full compliance with the search engines industry’s best practices.

Read More

Angular Security - Authentication Service

  • angular security authentication jwt

Angular is a framework for creating single page web application. Angular facilitates the security feature and protection mechanism. It provides frameworks by verifying all the routing urls with security authguard interface to validate and verify the user and its permissions.

Read More

React JS Developer Salary Overview

  • reactjs javascript salary

These days, web development is a need for any business - it attracts huge investments and can kick-start businesses. As for the tools mainly used for development, JavaScript is riding the wave right now. StackOverflow has been naming it the most popular programming language for six years straight. React, as one of the most popular JS libraries is also the first choice for interface developers. It offers some of the best web development tools for mobile and single-page applications.

Read More

All About Multi-Provider Feature of Angular Version 2.0

  • angular dependency-injection multi-providers

The newly introduced concept of dependency injection in Angular version 2.0 makes it an attractive front-end technology all because of one amazing feature called 'Multi-Providers'. In general, it allows the users to attach certain operations by themselves and a few plugin custom functionality which is not required in our mobile app use case.

Read More

Electron JS- Native capabilities

  • electronjs electron desktop-app

Electron is an open source library to build native applications which also works as cross-platform desktop applications. It provision operating system functionalities with help of node integration. In this article, we will go through how to access the Operating System variables, Inter system communication, System dialog, Access files, folders also their statistics.

Read More

Push Notifications using Angular

  • angular push-notifications notifications

Notifications is a message pushed to user's device passively. Browser supports notifications and push API that allows to send message asynchronously to the user. Messages are sent with the help of service workers, it runs as background tasks to receive and relay the messages to the desktop if the application is not opened. It uses web push protocol to register the server and send message to the application. Once user opt-in for the updates, it is effective way of re-engaging users with customized content.

Read More

ONLYOFFICE Document Server, an online office app for Nextcloud and ownCloud

  • office office-suite word spreadsheet

ONLYOFFICE Document Server is a free collaborative online office suite including viewers and editors for texts, spreadsheets and presentations, fully compatible with Office Open XML formats (.docx, .xlsx, .pptx). This article provides you the overview of ONLYOFFICE Document Server, its features, installation and integration with Nextcloud and ownCloud.

Read More

An Introduction to the UnQLite Embedded NoSQL Database Engine

  • database nosql embedded key-value-store

UnQLite is an embedded NoSQL database engine. It's a standard Key/Value store similar to the more popular Berkeley DB and a document-store database similar to MongoDB with a built-in scripting language called Jx9 that looks like Javascript. Unlike most other NoSQL databases, UnQLite does not have a separate server process. UnQLite reads and writes directly to ordinary disk files. A complete database with multiple collections is contained in a single disk file. The database file format is cross-platform, you can freely copy a database between 32-bit and 64-bit systems or between big-endian and little-endian architectures.

Read More

Web based commenting system. Embed directly in to your site

  • comment free commenting-system

Comments are very important for a blog or website to get feedback from their users. Comments could be threaded where users could be discuss and post reply to the comment. Here we going discuss about the most popular and widely used free commenting system. You need to embed their javascript code in your every page and it will take care the rest of the task.

Read More

WebSocket implementation with Spring Boot

  • websocket web-sockets spring-boot java

Spring Boot is a microservice-based Java framework used to create web application. WebSocket API is an advanced technology that provides full-duplex communication channels over a single TCP connection. This article explains about how to implement WebSocket using Spring Boot.

Read More

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.