Transition API

Detailed listing of all transition related features of Svelte Motion. A lot of the wording is directly copied from framer-motion, Copyright (c) 2018 Framer B.V. MIT License.

Inertia

interface
An animation that decelerates a value based on its initial velocity,
usually used to implement inertial scrolling.

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.

Just

interface
For internal use only.

Keyframes

interface
Keyframes tweens between multiple `values`.

These tweens can be arranged using the `duration`, `easings`, and `times` properties.

None

interface
Instant transition.

Orchestration

interface
Options for orchestrating the timing of animations.

PermissiveTransitionDefinition

{[key: string]: any}

Repeat

Spring

interface extends Repeat
An animation that simulates spring physics for realistic motion.
This is the default animation for physical values like `x`, `y`, `scale` and `rotate`.

Transition

Orchestration & Repeat & (TransitionDefinition | TransitionMap )

TransitionDefinition

Tween | Spring | Keyframes | Inertia | Just | None | PermissiveTransitionDefinition
List of all possible transition types.

TransitionMap

Orchestration & {[key: string]: TransitionDefinition }

Tween

interface extends Repeat
An animation that animates between two or more values over a specific duration of time.
This is the default animation for non-physical values like `color` and `opacity`.