Senior Three.js / A-frame developer
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…
Here is a list of great tools I’ve used for project maintenance:
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
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.
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.
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:
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:
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:
A few days ago a github contributor added an another feature — “pausing tweens”
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:
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:
What’s inside of a Color plugin?
We used the following dependencies:
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.
Implementation uses Plugins API and includes the following functions inside of a plugin object:
startValueshould be covered by the color plugin or not
destValue. And it does an immediate conversion from color strings to arrays of format
[r, g, b]that can be interpolated easily.
update()function of a tween object. The output is converted back to string and is stored in
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.
More about integration can be found in documentation on GitHub.
…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.