Writing a Javascript tweening engine with Between.js

Short intro

To be honest, there are already tons of tweening engines in Javascript ecosystem, there are great (popular) ones, such as Tween.js and GSAP.

There are PROS and CONS for both as I’ve loved simplicity & accessibility of Tween.js and performance/smooth of GSAP. However, web is moving forward and libraries need to be upgraded to meet todays conditions.

A month ago I decided to try my skills in writing own tweening engine and here’s how I did it…

Preparing & setup

Every modern library needs to be surrounded with great tools from Javascript ecosystem, such as linting, unit testing, tests coverage. Ideally, I would either include benchmarks and more visual examples, but I’d say they are rather uncomplete at the moment of writing this article.

Here is a list of great tools I’ve used for project maintenance:

• Ava.js — 🚀 Futuristic JavaScript test runner
• Istanbul.js — Tests coverage analysis tool
• XO — JavaScript happiness style linter

Every single line of open source repository should be linted & tested to follow certain rules and result into a great piece of software for further usage by millions. That’s why I love to introduce these tools that will help you automate & secure your development workflow.

For running tests / coverage remotely we use Travis CI, which is widely used among the open source community. Here’s how it looks like: https://travis-ci.org/sasha240100/between.js

Conception & API

The most important part and the most interesting the same time is API development. Start with doing a research, look at existing implementations of similar open source software and make sure that you really need to create something new 🤔 rather than using great and well-trusted tools.

In my case I just wanted a proper Tween.js replacement written in ES6 with middleware support. That is what pushed me to write a Between.js.

Standard Between.js API

Everything is that simple. Yes, it looks similar to Tween.js/GSAP just because this piping pattern is great. And there is nothing bad with it.

So what was wrong_(not so good)_ with Tween.js? For me (personally) I would highlight the necessity of using objects. The only structure you could interpolate/tween was an object.

In between.js we decided to tween literally everything. This way you can interpolate an object, array, number or even a string (with a help of plugins). Yes, you can tween from rgb(255, 0, 0) to rgba(65, 255, 134, 0.5) for example.

P.s.: …and even to hex value, such as #008B8B which is a “Cyan 4” color according to color-hex.com.

The magic above can be done with a help of dom-color.js plugin for between.js. We’ll cover this topic again closer to the end of the article.

Easing

On some point of developing between.js we thought that it would be great to make a powerful tweening API, that is simple in usage. Below is a basic easing code sample:

Basic easing usage example

Easing in action

We used a easing-functions package and expose its functions through the Between.Easing object. So if you mind to expand the easing collection, please contribute to that package and we’ll update its version in the dependencies to include more varieties of easings. At the moment we support 31 easing mode:

Easing — functions modes

Depending on your skills and experience easing API can be a powerful instrument you can try in your future projects, just for example an object transforms transition:

Easing animation transition example.

A few days ago a github contributor added an another feature — “pausing tweens” pause(), play(), isPaused() methods. These can be used for dynamic interaction with tweens and expands between.js possibilities in usage by video games and creative websites. Below is a simple example of how it can be used:

Pausing/resuming a tween

Color plugin

When Between.js was almost ready we decided to develop an additional color plugin, that provides a comfortable color change way.

Color types that are supported by plugin:

• RGB or RGBA
• HEX
• HSL
• Keywords (red, green…)

Node/Webpack color plugin usage example

Color plugin in action

What’s inside of a Color plugin?

We used the following dependencies:

1. color — A nice library that was used for color conversion inside of initialize() function

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

2. color-string — We used it to check if a string is a color keyword. Either is a dependency of a library above.

library for parsing and generating CSS color strings.

color-string_Parser and generator for CSS color strings_www.npmjs.com

3. lerp — A neat linear interpolation function, written by Matt DesLauriers.

lerp_bare-bones linear interpolation function_www.npmjs.com

Implementation uses Plugins API and includes the following functions inside of a plugin object:

• Testing if the startValue should be covered by the color plugin or not

• Initializing the startValue and destValue . And it does an immediate conversion from color strings to arrays of format [r, g, b] that can be interpolated easily.

• Color arrays interpolation. This step is executed inside of update() function of a tween object. The output is converted back to string and is stored in this.value .

Integration

So let’s consider we are all webpack users and interested in dom-color plugin and we want to include it the usual way — with harmony modules. It’s a little bit more tricky than in browser, but turns out it is just as simple as it can be. The only thing we have to do is to import a ColorPlugin (as default) and assign it to internal Between._plugins object. The property name doesn’t matter, but I advise you to keep its name related to avoid further confusions.

Color & easing integration

Color & easing integration in action

More about integration can be found in documentation on GitHub.

To sum up…

…it was an interesting experience for us to create something new, redesign old but gold patterns to follow modern ES6 trends and expand functionality with plugin support integration.

We really want you to try between.js in action and join our community to support open source software development, so please open a new issue and propose your ideas. We are open to bring some more plugins into live soon!

Big thanks to Alexandr Kornienko for a collaboration, he helped me to prepare this article and developed some cool visual demos for easing.