Introducing Scene.js Library to Create Timeline-Based Animation
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.
However, CSS animations can be uncomfortable, with relative time (%) written and long names and no custom functions available. So
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.
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.
Supports various value types
The CSS properties support a variety of types and are converted to values for calculation within 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.
The following link shows the difference in easing:
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
- wipeIn / wipeOut
- zoomIn / zoomOut
- fadeIn / fadeOut
- flip / flipX / flipY
- shake / shakeX / shakeY
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.
- Use in React : react-scenejs
- Use in Angular : ngx-scenejs
- Use in Vue : vue-scenejs
- Use in Preact : preact-scenejs
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 install scenejs
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@example.com or Twitter. See you soon!