Introducing Scene.js Library to Create Timeline-Based Animation

Introducing Scene.js Library to Create Timeline-Based Animation

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.

https://github.com/daybrush/scenejs-timeline

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.

You can repeat a scene by starting and ending at the same time.

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.

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.

CSS is 100% based, but Scene.js can be written in absolute time.

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.

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.

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.

opacity: 0 to 1

• 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.)

translate: 100% to 0%

• 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.

typing

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.

The following link shows the difference in easing:

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.

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 :

• wipeIn / wipeOut
• zoomIn / zoomOut
• fadeIn / fadeOut
• blink
• flip / flipX / flipY
• shake / shakeX / shakeY
• transition

transitionhelps 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.

• Use in React : react-scenejs
• Use in Angular : ngx-scenejs
• Use in Vue : vue-scenejs
• Use in Preact : preact-scenejs

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.

CSS animation and examples can be seen in CodePen .

To use with npm or script, run the following command:

• npm

npm install scenejs

• script

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

Please refer to Scene.js features for an introduction of key features.

Please refer to Scene.js API document for instructions on how to use method / event etc.

Feel free to contact me if you have any questions or requests by [email protected] or Twitter . See you soon!

Thank you.

References

CSS Types: Color

CSS Properties: timing-function