Transitions
A transition
defines the type of animation used when animating between two values.
Setting a transition
transition
can be set on any animation prop, and that transition will be used when the animation fires.
Value-specific transitions
When animating multiple values, each value can be animated with a different transition, with default
handling all other values:
Default transitions
It's possible to set default transitions via the transition
prop. Either for specific motion
components:
Or for a group of motion
components via MotionConfig
:
Transition settings
type
Default: Dynamic
type
decides the type of animation to use. It can be "tween"
, "spring"
or "inertia"
.
Tween animations are set with a duration and an easing curve.
Spring animations are either physics-based or duration-based.
Physics-based spring animations are set via stiffness
, damping
and mass
, and these incorporate the velocity of any existing gestures or animations for natural feedback.
Duration-based spring animations are set via a duration
and bounce
. These don't incorporate velocity but are easier to understand.
Inertia animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling.
Spring visualiser
Tween
duration
Default: 0.3
(or 0.8
if multiple keyframes are defined)
The duration of the animation. Can also be used for "spring"
animations when bounce
is also set.
ease
The easing function to use with tween animations. Accepts:
Easing function name. E.g
"linear"
An array of four numbers to define a cubic bezier curve. E.g
[.17,.67,.83,.67]
A JavaScript easing function, that accepts and returns a value
0
-1
.
These are the available easing function names:
"linear"
"easeIn"
,"easeOut"
,"easeInOut"
"circIn"
,"circOut"
,"circInOut"
"backIn"
,"backOut"
,"backInOut"
"anticipate"
When animating keyframes, ease
can optionally be set as an array of easing functions to set different easings between each value:
I usually use the
"easeOut"
curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than0.3
/0.4
seconds to keep the animation fast.
~ Emil Kowalski, Animations on the Web
times
When animating multiple keyframes, times
can be used to adjust the position of each keyframe throughout the animation.
Each value in times
is a value between 0
and 1
, representing the start and end of the animation.
There must be the same number of times
as there are keyframes. Defaults to an array of evenly-spread durations.
Spring
bounce
Default: 0.25
bounce
determines the "bounciness" of a spring animation.
0
is no bounce, and 1
is extremely bouncy.
Note: bounce
and duration
will be overridden if stiffness
, damping
or mass
are set.
visualDuration
If visualDuration
is set, this will override duration
.
The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.
In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.
This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.
damping
Default: 10
Strength of opposing force. If set to 0, spring will oscillate indefinitely.
mass
Default: 1
Mass of the moving object. Higher values will result in more lethargic movement.
stiffness
Default: 1
Stiffness of the spring. Higher values will create more sudden movement.
I never really understood how
damping
,mass
andstiffness
influence a spring animation, so I made a tool for myself to visualise it.
~ Emil Kowalski, Animations on the Web
velocity
Default: Current value velocity
The initial velocity of the spring.
restSpeed
Default: 0.1
End animation if absolute speed (in units per second) drops below this value and delta is smaller than restDelta
.
restDelta
Default: 0.01
End animation if distance is below this value and speed is below restSpeed
. When animation ends, the spring will end.
Inertia
An animation that decelerates a value based on its initial velocity. Optionally, min
and max
boundaries can be defined, and inertia will snap to these with a spring animation.
This animation will automatically precalculate a target value, which can be modified with the modifyTarget
property.
This allows you to add snap-to-grid or similar functionality.
Inertia is also the animation used for dragTransition
, and can be configured via that prop.
power
Default: 0.8
A higher power value equals a further calculated target.
timeConstant
Default: 700
Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel.
modifyTarget
A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.
min
Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).
max
Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).
bounceStiffness
Default: 500
If min
or max
is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement.
bounceDamping
Default: 10
If min
or max
is set, this affects the damping of the bounce spring. If set to 0
, spring will oscillate indefinitely.
Orchestration
delay
Default: 0
Delay the animation by this duration (in seconds).
By setting delay
to a negative value, the animation will start that long into the animation. For instance to start 1 second in, delay
can be set to -1
.
repeat
Default: 0
The number of times to repeat the transition. Set to Infinity
for perpetual animation.
repeatType
Default: "loop"
How to repeat the animation. This can be either:
loop
: Repeats the animation from the start.reverse
: Alternates between forward and backwards playback.mirror
: Switches animation origin and target on each iteration.
repeatDelay
Default: 0
When repeating an animation, repeatDelay
will set the duration of the time to wait, in seconds, between each repetition.
when
Default: false
With variants, describes when an animation should trigger, relative to that of its children.
"beforeChildren"
: Children animations will play after the parent animation finishes."afterChildren"
: Parent animations will play after the children animations finish.
delayChildren
Default: 0
With variants, setting delayChildren
on a parent will delay child animations by this duration (in seconds).
staggerChildren
Default: 0
With variants, setting staggerChildren
on a parent will stagger children by this duration.
For example, if staggerChildren
is set to 0.1
, the first child will delayed by 0
seconds, the second by 0.1
, the third by 0.2
etc.
The calculated delay will be additional to delayChildren
.
staggerDirection
Default: 1
The direction in which to stagger children. 1
will stagger from the first to last child, while -1
staggers from last to first.
A Motion+ membership will give you early access to features & content, access to our private Discord, and more.
It's a one-time fee that grants lifetime access. No subscription necessary!