Ease

animare comes with a few predefined easing functions.

example

import { ease } from 'animare/plugins';

animare.single({ to: 100, ease: ease.out.quad }, info => console.log(info.value));

Linear

ease.linear Default

Default linear easing function.

linear

Sine

ease.in.sine in
ease.out.sine out
ease.inOut.sine in-out

in.sine

out.sine

inOut.sine

Quad

ease.in.quad in
ease.out.quad out
ease.inOut.quad in-out

in.quad

out.quad

inOut.quad

Cubic

ease.in.cubic in
ease.out.cubic out
ease.inOut.cubic in-out

in.cubic

out.cubic

inOut.cubic

Quart

ease.in.quart in
ease.out.quart out
ease.inOut.quart in-out

in.quart

out.quart

inOut.quart

Quint

ease.in.quint in
ease.out.quint out
ease.inOut.quint in-out

in.quint

out.quint

inOut.quint

Expo

ease.in.expo in
ease.out.expo out
ease.inOut.expo in-out

in.expo

out.expo

inOut.expo

Circ

ease.in.circ in
ease.out.circ out
ease.inOut.circ in-out

in.circ

out.circ

inOut.circ

Elastic

ease.in.elastic in
ease.out.elastic out
ease.inOut.elastic in-out

in.elastic

out.elastic

inOut.elastic

Bounce

ease.in.Bounce in
ease.out.Bounce out
ease.inOut.Bounce in-out

in.bounce

out.bounce

inOut.bounce

Back()

ease.in.back(c1 = 1.70158) in
ease.out.back(c1 = 1.70158) out
ease.inOut.back(c1 = 1.70158) in-out

in.back()

out.back()

inOut.back()

Poly()

ease.in.poly(n: number) in
ease.out.poly(n: number) out
ease.inOut.poly(n: number) in-out

A power function. Position is equal to the Nth power of elapsed time.

in.poly(10)

out.poly(2)

inOut.poly(3)

Wobble()

ease.in.wobble(bounciness = 1) in
ease.out.wobble(bounciness = 1) out
ease.inOut.wobble(bounciness = 1) in-out

Creates a simple elastic interaction, similar to a spring oscillating back and forth. The default bounciness is 1, which overshoots a little bit once. A bounciness of 0 doesn’t overshoot at all, and a bounciness of N > 1 will overshoot about N times.

in.wobble(0)

out.wobble(1)

inOut.wobble(6)

Spring()

ease.spring({ mass = 1, stiffness = 100, damping = 10, velocity = 0, duration = 1000 })

Creates a spring easing function.

Caution

The spring easing function will only look smooth at certain durations and with certain parameters.

spring()

Steps()

ease.steps(steps = 10, start = true)

Creates a staircase easing function.

steps The number of steps.
start Whether to start at the beginning or at the end of each interval.

steps(10, false)

steps(20)

CubicBezier()

ease.cubicBezier(x1: number, y1: number, x2: number, y2: number)

Defines a cubic Bézier curve, similar to CSS’s cubic-bezier easing function.

cubicBezier(.25, .1, .25, 1)

Custom()

ease.custom(d: string)

Creates a custom easing function from an SVG path d attribute string.

pathString The SVG path d attribute.

Caution

Only accepts strings generated by the Animare Ease Visualizer tool.

custom("...")

custom("...")

FromPoints()

fromPoints(values: Float32List)

Creates a custom easing function from a pre-generated array of points using Animare Ease Visualizer.

This could be useful for complicated custom easing functions that can effect the frame rate of the animation.

Use the Animare Ease Visualizer tool to create the easing function.