Introducing Scene.js Library to Create Timeline-Based Animation

You can control multiple elements at the same time

https://github.com/daybrush/scenejs-timeline
You can repeat a scene by starting and ending at the same time.

It is easy to use by transforming CSS grammar

Use absolute time (s) instead of relative time (%)

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

Support for cross-browsing and omit animation property prefix

It is convenient to support both JavaScript and CSS play methods

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

Supports various value types

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

Supports various effect presets.

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

Notes

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

References

--

--

--

A Front-end Engineer at NAVER / Daybrush https://daybrush.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why Did I Choose to Learn Vue.js?

Finding Common Ancestor, Binary Search Tree, JavaScript

Adding a lottie file to your React App

Simple Introduction to React.js

Deploy a Serverless VueJS App to AWS Fargate

First look at Vue UI

Creating a searchable music site, using the SoundCloud API

Correct and Efficient Vuex Using Part I

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daybrush (Younkue Choi)

Daybrush (Younkue Choi)

A Front-end Engineer at NAVER / Daybrush https://daybrush.com

More from Medium

Weekly Digest 49/2021

Styling Bold and Italic Fonts Using CSS

Infinite Scroll with TypeScript

Building a Mobile App using HTML, CSS, and JavaScript