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:
 

   

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


Build Consulting Website using Next.js

  • react nextjs website-development ssr

One of the popular web framework for building Single page application (SPA) or static site is React library. Application built with React packages will be rendered completely on the client side browser. If you want to reduce the load on client side browser, we need to pre-render the pages in server (Serer side rendering) and serve it to the client. So the client loads the page like simple html page. Also if the pages are rendered from server then search engine will be able to fetch and extract the pages. To do SSR for React, the best abstraction framework is Next.js. In this blog, we will explain how to build a simple consulting website using NextJS.

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


React Media LightBox - Part 2

  • react lightbox gallery media

In this blog, we will bring the essential features zoom control, download, fullscreen to enhance the view experience of the media items. Lightbox components provide options for captioning the media items as well. Brought all the features only with material design and there are no dependencies required for the functionalities of the media lightbox.

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


React Media Lightbox

  • lightbox gallery react audio video

Lightbox is a popular and widely used concept for showing the gallery of media files. It is a very impressive approach for the end user to glance through media files. Media files like audio or video will load the html audio or video controls.

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


Build Simple Ecommerce site using React and Jotai

  • ecommerce react jotai

Retail Ecommerce website can be created quickly with React. It can be created using React, Bootstrap, React DOM and Jotai. Data flow within the commerce site is done using Jotai in a light-weight manner. The main workflow of showing all the items in the gallery to user and user adding to the cart will be done as part of this blog.

Read More


Top 10 AI development tools which you should know in 2020

  • artificial-Intelligence neural-networks frameworks ai machine-learning

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


React Reduce Vs Jotai

  • jottai react redux

While developing web applications, we built many components and having a data model across the application wide model will be difficult. We need common store management to update and get information across all the components. In React based Web UI, redux is the official centralized state management to be used which is internally wired as state changes to the component. There are other alternatives to redux which are light-weight and simple to use. One among them is Jotai, a minimalistic API for state management. In this blog we will take one of the redux examples given in the redux site and do the same in Jotai for deeper understanding.

Read More


Generate PDF from Javascript using jsPDF

  • pdf jspdf javascript

We show lot of data in our web applications, it will be awesome if we quickly download specific part of PDF rather than printing it. It will be easy to share for different stakeholders and also for focused meetings. In web application development, download to PDF means, we need to develop backend api specifically and then link it in frontend which takes longer development cylce. Instead it would be really great, if there is way to download what we see in the user interface quickly with few lines of Javascript, similar to export options in word processing application.

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







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.