Short intro To be honest, there are already tons of tweening engines in Javascript ecosystem, there are great (popular) ones, such as and . Tween.js 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: — 🚀 Futuristic JavaScript test runner Ava.js — Tests coverage analysis tool Istanbul.js — JavaScript happiness style linter XO 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 we decided to tween literally . This way you can interpolate an object, array, number or even a string (with a help of plugins). Yes, you can tween from to for example. between.js everything rgb(255, 0, 0) rgba(65, 255, 134, 0.5) P.s.: …and even to hex value, such as which is a “Cyan 4” color according to #008B8B color-hex.com. The magic above can be done with a help of plugin for . We’ll cover this topic again closer to the end of the article. dom-color.js between.js Easing On some point of developing 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: between.js Basic easing usage example Easing in action We used a package and expose its functions through the 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 Between.Easing 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” , , methods. These can be used for dynamic interaction with tweens and expands possibilities in usage by video games and creative websites. Below is a simple example of how it can be used: pause() play() isPaused() between.js 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: — A nice library that was used for color conversion inside of function color initialize() JavaScript library for immutable color conversion and manipulation with support for CSS color strings. 2. — We used it to check if a string is a color keyword. Either is a dependency of a library above. color-string library for parsing and generating CSS color strings. _Parser and generator for CSS color strings_www.npmjs.com color-string 3. — A neat linear interpolation function, written by . lerp Matt DesLauriers _bare-bones linear interpolation function_www.npmjs.com lerp Implementation uses Plugins API and includes the following functions inside of a plugin object: Testing if the should be covered by the color plugin or not startValue Initializing the and . And it does an immediate conversion from color strings to arrays of format that can be interpolated easily. startValue destValue [r, g, b] Color arrays interpolation. This step is executed inside of function of a tween object. The output is converted back to string and is stored in . update() this.value Integration So let’s consider we are all users and interested in 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 object. The property name doesn’t matter, but I advise you to keep its name related to avoid further confusions. webpack dom-color Between._plugins Color & easing integration Color & easing integration in action More about integration can be found in on GitHub. documentation 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 in action and join our community to support open source software development, so please and propose your ideas. We are open to bring some more plugins into live soon! between.js open a new issue Big thanks to for a collaboration, he helped me to prepare this article and developed some cool visual demos for easing. Alexandr Kornienko

Harmony

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Writing a Javascript tweening engine with Between.js

Too Long; Didn't Read

Coins Mentioned

Alexander Buzin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Writing a Javascript tweening engine with Between.js

Too Long; Didn't Read

Coins Mentioned

Alexander Buzin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES