tangela

Tangela

You'll never get tangled in your code while write animations again, with Tangela you'll write simple and lightweight functional web animations with ease! Duo to the simple way of building your perfect ease using the pipeline system, you can create fast and scalable animations for things such as transitions or scrolling effects.

Made with ♥ by Jeffrey Lanters

Installation

Install using npm.

$ npm install tangela

Usage

To get started import the ease object from tangela!

Using eases can be as simple as what. In this example we'll create a quad easeing with accelerated at the start.

Once the ease is created, we can grab at point in time using the atTime function. This will be a number between 0 which will be the start, or 1 which will be the very end.

import { ease } from "tangela";
 
let simpleEase = ease.quad.in;
 
simpleEase.atTime(0.25); // returns 0.0625

Available Easings

on the ease object, the following easings are available:

back, cubic, expo, linear, quad, quart, quint, sine

All the eases can be used with the following accelerations:

in, out, inOut

Using the Pipeline

You can use the pipeline to create more powerful and customized easing functions. You can stack all the pipelines to create your super powered easing function!

Range Pipeline

If your point in time is different from a number between zero and one, you can use the range pipeline to set the from and to value's your time will span between.

let rangedEase = ease.quad.in.range(100, 200);
 
rangedEase.atTime(100); // returns 0
rangedEase.atTime(200); // returns 1
rangedEase.atTime(125); // returns 0.0625

Normal Pipeline

When you want to change the output value, you can use the normal pipeline to change the 0 to 1 output, to your own. Simple add normal to your pipeline to set the from and to values.

let normalEase = ease.quart.inOut.normal(50, 100);
 
normalEase.atTime(0); // returns 50
normalEase.atTime(1); // returns 100
normalEase.atTime(0.6); // returns 60.24

Invert Pipeline

Use the invert pipeline to flip the output behaviour.

let invertedEase = ease.quart.inOut.invert();
 
invertedEase.atTime(0); // returns 1
invertedEase.atTime(1); // returns 0
invertedEase.atTime(0.25); // returns 0.75