Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface IStaggerCustomEasingOptions

Hierarchy

Index

Properties

Optional decimal

decimal?: number

Optional duration

duration?: number

Optional easing

easing?: string | TypeEasingFunction

By default, Custom Easing support easing functions, in the form,

constant accelerate decelerate accelerate-decelerate decelerate-accelerate
linear ease-in / in ease-out / out ease-in-out / in-out ease-out-in / out-in
ease in-sine out-sine in-out-sine out-in-sine
steps in-quad out-quad in-out-quad out-in-quad
step-start in-cubic out-cubic in-out-cubic out-in-cubic
step-end in-quart out-quart in-out-quart out-in-quart
in-quint out-quint in-out-quint out-in-quint
in-expo out-expo in-out-expo out-in-expo
in-circ out-circ in-out-circ out-in-circ
in-back out-back in-out-back out-in-back
in-bounce out-bounce in-out-bounce out-in-bounce
in-elastic out-elastic in-out-elastic out-in-elastic
spring / spring-in spring-out spring-in-out spring-out-in

All Elastic easing's can be configured using theses parameters,

*-elastic(amplitude, period)

Each parameter comes with these defaults

Parameter Default Value
amplitude 1
period 0.5

All Spring easing's can be configured using theses parameters,

spring-*(mass, stiffness, damping, velocity)

Each parameter comes with these defaults

Parameter Default Value
mass 1
stiffness 100
damping 10
velocity 0

You can create your own custom cubic-bezier easing curves. Similar to css you type cubic-bezier(...) with 4 numbers representing the shape of the bezier curve, for example, cubic-bezier(0.47, 0, 0.745, 0.715) this is the bezier curve for in-sine.

Note: the easing property supports the original values and functions for easing as well, for example, steps(1), and etc... are supported.

Note: you can also use camelCase when defining easing functions, e.g. inOutCubic to represent in-out-cubic

Optional numPoints

numPoints?: number

Optional stagger

stagger?: IStaggerOptions

Generated using TypeDoc