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",
 }).playCSS();
 

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",
  }).playCSS();
 

 
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.

Notes
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
 
<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>
 
 
Reference:
 

Sponsored:
To find embedded technology information about MCU, IoT, AI etc Check out embedkari.com.


   

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. https://daybrush.com

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


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


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



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


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


Microweber CMS - An open source CMS with Ecommerce support

  • cms e-commerce microweber

To the user's satisfaction, there is a whole wide world of different CMS, all suitable for different needs. You can go for the giants like Wordpress or Joomla or pick one of the rising forces - Shopify, Squarespace or others. Microweber CMS fills a hole in the current technological ecosystem, aimed at delivering a light software that is perfect for all end-users lacking the technical knowledge needed for complicated website building.

Read More


An introduction to LucidWorks Enterprise Search

  • lucene solr search engine enterprise

Lucidworks Enterprise search solution is built on top of Apache Solr. It scales seamlessly w/sub-second response times under extreme query loads for multi-billion document collections. It has user friendly UI, which does all the job of configuration and search.

Read More


Microsoft acquires GitHub. Is it Good or Bad?

  • microsoft github news

Microsoft announced that it is acquiring GitHub for 7.5 Billion dollars. GitHub is a most used Software developer and Code hosting platform. It hosts more than 80 million code repository and more than 20 million developers collaborate in GitHub. In addition to managing code repositories, GitHub has developed many tools to increase the productivity of developers. Almost 70% of open source projects hosted in GitHub. Microsoft is a big corporate leader and it buying a open source code hosting company, Is it good or bad?

Read More