brease.js v1.1.4

Getting started

Installation

Via npm:

$ npm i brease.js

Usage

ESM:

import { Easing, Penner, Bezier, Steps, Elastic, Back } from "brease.js";

CJS:

const { Easing, Penner, Bezier, Steps, Elastic, Back } = require("brease.js");

Example

A simple eased animation using a Penner function to translate a circle on the x-axis from -100px to 100px during 1000ms.

import { Penner } from "brease.js";

let duration = 1000,
start = performance.now(),
element = document.getElementById("circle"),
easing = new Penner("outQuint", -100, 100, 0, duration);

let tick = () => {
  let time = performance.now();
  element.style.transform = `translateX(${easing.at(time-start)}px)`;
  if(time-start < duration) requestAnimationFrame(tick);
};

tick();

API

Easing

Constructor

new Easing(easing?, o1?, o2?, t1?, t2?)

Properties

Methods

Presets

• "linear"
• "ease", "easeIn", "easeOut" and "easeInOut"
• "stepStart" and "stepEnd"
• All Penner functions, prefixed with "ease" (e.g. "outQuint" → "easeOutQuint")

Example

let easing = new Easing("easeOutQuint", 0, 100, -200, 200);
// → input ranges from 0 to 100 
// → output ranges from -200 to 200 

easing.output.start -= 200;
// → output ranges from -400 to 200 

easing.time.range = [0, 1];
// → output ranges from 0 to 1 

easing.output.delta = 400;
// → output ranges from -400 to 0 

easing.invert();
// → output ranges from 0 to -400 

Penner

This class can be used to quickly create an easing using one of Robert Penner's functions. All functions work identically to Penner's. Extends Easing.

Constructor

new Penner(name, ...args?)

Functions

Each of Penner's functions has an in, out, in-out and out-in variant. If you want to learn more about these functions, visit easings.net ↗.

Bezier

This class can be used to create a custom cubic Bézier curve easing. You can use a Bézier curve generator ↗ to visualise the curve and generate the corresponding parameters. Extends Easing.

Constructor

new Bezier(x1, y1, x2, y2, ...args?)

Steps

This class can be used to define a step function. Divides the output range into equidistant steps. Visit the MDN docs ↗ for more information. Extends Easing.

Constructor

new Steps(number, direction?, ...args?)

Elastic

This class can be used to define a custom elastic curve easing. Extends Easing.

Constructor

new Elastic(amplitude?, period?, direction?, ...args?)

Back

This class can be used to define a custom back curve easing. Extends Easing.

Constructor

new Back(overshoot?, direction?, ...args?)