Animation API

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

AnimationDefinition

VariantLabels | TargetAndTransition | TargetResolver

AnimationOptions

{
delay?: number;
transitionOverride?: Transition ;
custom?: any;
type?: AnimationType ;
}

AnimationPlaybackControls

{stop: () => void}

AnimationProps

interface

• animate: AnimationControls | TargetAndTransition | VariantLabels | boolean
  Values to animate to, variant label(s), or `AnimationControls`.
• exit: TargetAndTransition | VariantLabels
  A target to animate to when this component is removed from the tree.
  
  This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation.
• variants: Variants
  Variants allow you to define animation states and organise them by name. They allow
  you to control animations throughout a component tree by switching a single `animate` prop.
  
  Using `transition` options like `delayChildren` and `staggerChildren`, you can orchestrate
  when children animations play relative to their parent.
  
  After passing variants to one or more Motion component's `variants` prop, these variants
  can be used in place of values on the `animate`, `initial`, `whileFocus`, `whileTap` and `whileHover` props.
• transition: Transition
  Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.

AnimationState

{
animateChanges: (options?: AnimationOptions , type?: AnimationType ) => Promise<any>;
setActive: (type: AnimationType , isActive: boolean, options?: AnimationOptions ) => Promise<any>;
setAnimateFunction: (fn: any) => void;
isAnimated(key: string): boolean;
getState: () => {
[key: string]: AnimationTypeState ;
};
}

AnimationType

enum {
Animate = "animate",
Hover = "whileHover",
Tap = "whileTap",
Drag = "whileDrag",
Focus = "whileFocus",
Exit = "exit"
}

AnimationTypeState

{
isActive: boolean;
protectedKeys: {
[key: string]: true;
};
needsAnimating: {
[key: string]: boolean;
};
prevResolvedValues: {
[key: string]: any;
};
prevProp?: VariantLabels | TargetAndTransition ;
}

LifecycleManager

{
onLayoutMeasure: (callback: LayoutMeasureListener ) => () => void;
notifyLayoutMeasure: LayoutMeasureListener ;
onBeforeLayoutMeasure: (callback: BeforeLayoutMeasureListener ) => () => void;
notifyBeforeLayoutMeasure: BeforeLayoutMeasureListener ;
onLayoutUpdate: (callback: LayoutUpdateListener ) => () => void;
notifyLayoutUpdate: LayoutUpdateListener ;
onViewportBoxUpdate: (callback: OnViewportBoxUpdate ) => () => void;
notifyViewportBoxUpdate: OnViewportBoxUpdate ;
onUpdate: (callback: UpdateListener ) => () => void;
notifyUpdate: UpdateListener ;
onAnimationStart: (callback: AnimationStartListener ) => () => void;
notifyAnimationStart: AnimationStartListener ;
onAnimationComplete: (callback: AnimationCompleteListener ) => () => void;
notifyAnimationComplete: AnimationCompleteListener ;
onLayoutAnimationComplete: (callback: LayoutAnimationCompleteListener ) => () => void;
notifyLayoutAnimationComplete: LayoutAnimationCompleteListener ;
onSetAxisTarget: (callback: SetAxisTargetListener ) => () => void;
notifySetAxisTarget: SetAxisTargetListener ;
onRender: (callback: RenderListener ) => () => void;
notifyRender: RenderListener ;
onUnmount: (callback: () => void) => () => void;
notifyUnmount: () => void;
clearAllListeners: () => void;
updatePropListeners: (props: MotionProps ) => void;
}

VisualElementLifecycles

interface

• onViewportBoxUpdate: (box: AxisBox2D , delta: BoxDelta ) => void
  A callback that fires whenever the viewport-relative bounding box updates.
• onBeforeLayoutMeasure: (box: AxisBox2D ) => void
  
• onLayoutMeasure: (box: AxisBox2D , prevBox: AxisBox2D ) => void
  
• onUpdate: (latest: ResolvedValues ) => void
  Callback with latest motion values, fired max once per frame.
• onAnimationStart: () => void
  Callback when animation defined in `animate` begins.
• onAnimationComplete: (definition: AnimationDefinition ) => void
  Callback when animation defined in `animate` is complete.
  
  The provided callback will be called the triggering animation definition.
  If this is a variant, it'll be the variant name, and if a target object
  then it'll be the target object.
  
  This way, it's possible to figure out which animation has completed.

animate

<V>(from: MotionValue <V> | V, to: V | V[], transition?: AnimationOptions <V>) => AnimationPlaybackControls
Animate a single value or a MotionValue .

The first argument is either a MotionValue to animate, or an initial animation value.

The second is either a value to animate to, or an array of keyframes to animate through.

The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.

Returns AnimationPlaybackControls , currently just a `stop` method.

animationControls

() => AnimationControls

useAnimation

() => AnimationControls
Creates AnimationControls , which can be used to manually start, stop
and sequence animations on one or more components.

The returned AnimationControls should be passed to the `animate` property
of the components you want to animate.

These components can then be animated with the `start` method.