`⇦ Back to Table of Contents`

Ease-Functions ^library

Import

This library cannot be used without having imported the universalsmoothscroll-min.js script in your project first.
This library is also a module so each function you see below must be imported before you can use it.

For example:

  //The name of these and more other functions is in the table below.
  import {
    EASE_LINEAR,
    EASE_IN_CIRC,
    EASE_OUT_QUAD,
    EASE_IN_OUT_SINE,
    EASE_OUT_BOUNCE
  } from "YOUR_JAVASCRIPT_FOLDER/universalsmoothscroll-ease-functions-min.js";

  //From here I can start using the imported functions.
  ...

Usage

This library contains functions that can be invoked to get custom stepLengthCalculators which can be used to control the easing of any scroll-animation.

In order to do that, just pass the returned stepLengthCalculator to either one of these methods:

setXStepLengthCalculator for the scroll-animations on the x-axis of your container.
setYStepLengthCalculator for the scroll-animations on the y-axis of your container.
setStepLengthCalculator for the scroll-animations on both axes of your container.

For instance:

  import {
    ...
  } from "YOUR_JAVASCRIPT_FOLDER/universalsmoothscroll-ease-functions-min.js";

  //Save the returned value (a stepLengthCalculator) to use it later.
  const myCustomStepLengthCalculator = CUSTOM_CUBIC_HERMITE_SPLINE(
    [0, 0.5, 1],
    [0, 0.2, 1]
  );

  //Use the imported functions to customize the easings of your scroll-animatons.
  uss.setXStepLengthCalculator(EASE_OUT_QUAD(300), myContainer, true);
  uss.setYStepLengthCalculator(EASE_OUT_BOUNCE(750), myContainer, true);
  uss.setStepLengthCalculator(myCustomStepLengthCalculator, myContainer);

Note:
A bold input parameter's name means that it's a mandatory input (its default value is always ✗).
An italic input parameter's name means that it's an optional parameter.

Name	Input Parameters	Default values
`CUSTOM_CUBIC_HERMITE_SPLINE`	`xs`, `ys`	✗
	`tension`	`0`
	`duration`	`500`
	`callback`	`undefined`
`CUSTOM_BEZIER_CURVE`	`xs`, `ys`	✗
	`duration`	`500`
	`callback`	`undefined`
`CUSTOM_CUBIC_BEZIER`	`x1`, `y1`, `x2`, `y2`	`0`, `0`, `1`, `1`
	`duration`	`500`
	`callback`	`undefined`
`EASE_LINEAR`	`duration`	`500`
`EASE_LINEAR`	`callback`	`undefined`
`EASE_IN_SINE`	`duration`	`500`
`EASE_IN_SINE`	`callback`	`undefined`
`EASE_IN_QUAD`	`duration`	`500`
`EASE_IN_QUAD`	`callback`	`undefined`
`EASE_IN_CUBIC`	`duration`	`500`
`EASE_IN_CUBIC`	`callback`	`undefined`
`EASE_IN_QUART`	`duration`	`500`
`EASE_IN_QUART`	`callback`	`undefined`
`EASE_IN_QUINT`	`duration`	`500`
`EASE_IN_QUINT`	`callback`	`undefined`
`EASE_IN_EXPO`	`duration`	`500`
`EASE_IN_EXPO`	`callback`	`undefined`
`EASE_IN_CIRC`	`duration`	`500`
`EASE_IN_CIRC`	`callback`	`undefined`
`EASE_IN_BOUNCE`	`duration`	`900`
	`callback`	`undefined`
	`bouncesNumber`	`3`
`EASE_OUT_SINE`	`duration`	`500`
`EASE_OUT_SINE`	`callback`	`undefined`
`EASE_OUT_QUAD`	`duration`	`500`
`EASE_OUT_QUAD`	`callback`	`undefined`
`EASE_OUT_CUBIC`	`duration`	`500`
`EASE_OUT_CUBIC`	`callback`	`undefined`
`EASE_OUT_QUART`	`duration`	`500`
`EASE_OUT_QUART`	`callback`	`undefined`
`EASE_OUT_QUINT`	`duration`	`500`
`EASE_OUT_QUINT`	`callback`	`undefined`
`EASE_OUT_EXPO`	`duration`	`500`
`EASE_OUT_EXPO`	`callback`	`undefined`
`EASE_OUT_CIRC`	`duration`	`500`
`EASE_OUT_CIRC`	`callback`	`undefined`
`EASE_OUT_BOUNCE`	`duration`	`900`
	`callback`	`undefined`
	`bouncesNumber`	`3`
`EASE_IN_OUT_SINE`	`duration`	`500`
`EASE_IN_OUT_SINE`	`callback`	`undefined`
`EASE_IN_OUT_QUAD`	`duration`	`500`
`EASE_IN_OUT_QUAD`	`callback`	`undefined`
`EASE_IN_OUT_CUBIC`	`duration`	`500`
`EASE_IN_OUT_CUBIC`	`callback`	`undefined`
`EASE_IN_OUT_QUART`	`duration`	`500`
`EASE_IN_OUT_QUART`	`callback`	`undefined`
`EASE_IN_OUT_QUINT`	`duration`	`500`
`EASE_IN_OUT_QUINT`	`callback`	`undefined`
`EASE_IN_OUT_EXPO`	`duration`	`500`
`EASE_IN_OUT_EXPO`	`callback`	`undefined`
`EASE_IN_OUT_CIRC`	`duration`	`500`
`EASE_IN_OUT_CIRC`	`callback`	`undefined`
`EASE_IN_OUT_BOUNCE`	`duration`	`1200`
	`callback`	`undefined`
	`bouncesNumber`	`6`
`EASE_ELASTIC_X`	`forwardEasing`	✗
	`backwardEasing`	✗
	`elasticPointCalculator`	`() => 50`
	`debounceTime`	`0`
`EASE_ELASTIC_Y`	`forwardEasing`	✗
	`backwardEasing`	✗
	`elasticPointCalculator`	`() => 50`
	`debounceTime`	`0`

The `xs` and `ys` parameters

They're 2 arrays containing finite numbers between 0 (included) and 1 (included).
They must contain the same number of elements.
Values at the same index will represent a single point (x,y).
xs and ys can both be empty.

For instance:

/**
 * In this example:
 * xs and ys represents the 3 points
 * - (0,0)
 * - (0.50, 0.25)
 * - (1,1)
 */
const xs = [0, 0.50, 1];
const ys = [0, 0.25, 1];

In the case of the CUSTOM_BEZIER_CURVE easing, the xs and ys's values represent the control points of a generic n-th degree bezier curve.

For example:

/**
 * In this example:
 * xs and ys represents the 4 control points
 * - (0,0)
 * - (0.33, 1.00)
 * - (0.68, 1.00)
 * - (1,1)
 * 
 * N.B. Using 4 control points will give you a cubic bezier curve.
 *      In this case:
 *      CUSTOM_BEZIER_CURVE(xs,ys) === CUSTOM_CUBIC_BEZIER(0.33, 1.00, 0.68, 1.00) 
 */
const xs = [0, 0.33, 0.68, 1];
const ys = [0, 1.00, 1.00, 1];

//This is a non-temporary EASE_OUT_CUBIC-like easing
//which always make the scroll-animation last 1 second.
uss.setStepLengthCalculator(
    CUSTOM_BEZIER_CURVE(xs, ys, 1000),
    myContainer, 
    false
);

In the case of the CUSTOM_CUBIC_HERMITE_SPLINE easing, successive xs's values represent the generic interpolation intervals (x_k , x_k+1) of a canonical cubic hermite spline and they must be sorted, whereas the ys's values represent the points through which the spline should pass in the specified xs intervals.

For instance:

/**
 * In this example:
 * xs and ys represents the 4 points
 * - (0,0)
 * - (0.40, 0.26)
 * - (0.60, 0.84)
 * - (1,1)
 * N.B. You can add as many points as you want, 
 *      but the API's hermite splines will always be cubic.
 */
const xs = [0, 0.40, 0.60, 1];
const ys = [0, 0.26, 0.84, 1];

//This is a temporary custom EASE_IN_OUT-like easing
//which always make the scroll-animation last 1.2 second.
uss.setStepLengthCalculator(
    CUSTOM_CUBIC_HERMITE_SPLINE(xs, ys, 0, 1200),
    myContainer, 
    true
);

The `tension` parameter

It's a number between 0 (included) and 1 (included) which represent the tension of a canonical cubic hermite spline.
The lesser the tension value is, the softer the spline will be.

The `x1`, `y1`, `x2` and `y2` parameters

They're 4 finite numbers between 0 (included) and 1 (included).
They're the 2^nd and the 3^rd control points of a cubic bezier curve ((x1,y1) and (x2,y2)).
The 1^st control point is always fixed to (0,0) whilst the 4^th one is fixed to (1,1).
They determine the type of easing the returned stepLengthCalculator will have.

The `duration` parameter

It's a positive number which indicates the time (in milliseconds) every scroll-animation controlled by this stepLengthCalculator will last.

The `callback` parameter

Each one of the above mentioned functions will return a stepLengthCalculator when invoked.
These stepLengthCalculators are passed some input parameters (see here for more info).
The callback parameter is a function which will be executed at every scroll-animation step and that is always invoked with those same input parameters.

The `bouncesNumber` parameter

It's the number of bounces the returned stepLengthCalculator will do before completing the scroll-animation.
A bounce occurs when the scroll-animation reaches the highest scrollable value of a container and then goes back.

EASE_ELASTIC parameters

The `forwardEasing` parameter

It's a stepLengthCalculator that controls the easing of the forward part of the scroll-animation.

The `backwardEasing` parameter

It's a stepLengthCalculator that controls the easing of the backward part of the scroll-animation.

The `elasticPointCalculator` parameter

It's a function which must return the number of pixels that will be scrolled by the backward part of the scroll-animation.
If this function returns a negative number, the forwardEasing will be used instead of the backwardEasing for the backward part of the scroll-animation.

An ElasticPointCalculator is always passed the following input parameters (in this order):
- the originalTimestamp which indicates the exact time in milliseconds at which the (forward part of) the scroll-animation has started
- the currentTimestamp which indicates the time in milliseconds at which this function is invoked
- the currentPosition of the container's scrollTop/Left (scrollTop/scrollY for EASE_ELASTIC_Y, scrollLeft/scrollX for EASE_ELASTIC_X)
- the direction of the (forward part of) scroll-animation: 1 if the scrolling was from right-to-left/bottom-to-top, -1 otherwise
- the container on which the scroll-animation is currently being performed (an Element that can be scrolled or the Window)

The `debounceTime` parameter

It's the time (in milliseconds) that has to elapse after the end of the (forward part of) the scroll-animation in order to start the backward part.

For example:

/**
 * Every scroll-animation on the x-axis of myContainer:
 *  - will scroll by x pixels with an EASE_OUT_QUAD easing for 1 second
 *  - will wait 500ms
 *  - will scroll by 50 pixels in the opposite direction with an EASE_OUT_BOUNCE easing for 700ms
 */
uss.setXStepLengthCalculator(
  EASE_ELASTIC_X(
    EASE_OUT_QUAD(1000),
    EASE_OUT_BOUNCE(700),
    (originalTimestamp, currentTimestamp, currentPosition, direction, container) => 50,
    500
  ), 
  myContainer
);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`⇦ Back to Table of Contents`

Ease-Functions ^library

Import

Usage

The `xs` and `ys` parameters

The `tension` parameter

The `x1`, `y1`, `x2` and `y2` parameters

The `duration` parameter

The `callback` parameter

The `bouncesNumber` parameter

EASE_ELASTIC parameters

The `forwardEasing` parameter

The `backwardEasing` parameter

The `elasticPointCalculator` parameter

The `debounceTime` parameter

`Go to next section ⇨`

Uh oh!

FilesExpand file tree

EaseFunctions.md

Latest commit

History

EaseFunctions.md

File metadata and controls

⇦ Back to Table of Contents

Ease-Functions library

Import

Usage

The xs and ys parameters

The tension parameter

The x1, y1, x2 and y2 parameters

The duration parameter

The callback parameter

The bouncesNumber parameter

EASE_ELASTIC parameters

The forwardEasing parameter

The backwardEasing parameter

The elasticPointCalculator parameter

The debounceTime parameter

Go to next section ⇨

`⇦ Back to Table of Contents`

Ease-Functions ^library

The `xs` and `ys` parameters

The `tension` parameter

The `x1`, `y1`, `x2` and `y2` parameters

The `duration` parameter

The `callback` parameter

The `bouncesNumber` parameter

The `forwardEasing` parameter

The `backwardEasing` parameter

The `elasticPointCalculator` parameter

The `debounceTime` parameter

`Go to next section ⇨`