Utilities API

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

AnimationControls

interface

• subscribe: (visualElement: VisualElement ) => () => void
  Subscribes a component's animation controls to this.
• start: (definition: [#ControlsAnimationDefinition, transitionOverride?: Transition ) => Promise<any>
  Starts an animation on all linked components.
• set: (definition: [#ControlsAnimationDefinition) => void
  Instantly set to a set of properties or a variant.
• stop: () => void
  Stops animations on all linked components.
• mount: () => void
  

CustomValueType

interface

• mix: (from: any, to: any) => (p: number) => number | string)
  
• toValue: () => number | string
  

DragControlOptions

{snapToCursor?: boolean, cursorProgress?: Point2D }

DragControls

class
Can manually trigger a drag gesture on one or more `drag`-enabled Motion components.

• subscribe: (controls: VisualElementDragControls ) => () => void
  Subscribe a component's internal VisualElementDragControls to the user-facing API.
• start: (event: MouseEvent | TouchEvent | PointerEvent, options?: DragControlOptions ) => void
  Start a drag gesture on every Motion component that has this set of drag controls
  passed into it via the `dragControls` prop.
• updateConstraints: (flush?: boolean) => void
  

Easing

(i:number) => number

SpringOptions

interface
Options for a Spring object for `transform` or useSpring .

• velocity: number?
  
• stiffness: number?
  
• damping: number?
  
• mass: number?
  
• from: number?
  
• to: number?
  
• duration: number?
  
• bounce: number?
  
• restSpeed: number?
  
• restDelta: number?
  

TransformOptions

interface<T>

• clamp: boolean?
  Clamp values to within the given range. Defaults to `true`
• ease: Easing || Easing []
  Easing functions to use on the interpolations between each value in the input and output ranges.
  
  If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition **between** each.

transform

<T>(inputRange: number[], outputRange: T[], options?: TransformOptions <T>) => (inputValue: number) => T
Transforms numbers into other values by mapping them from an input range to an output range.

or

<T>(inputValue: number, inputRange: number[], outputRange: T[], options?: TransformOptions <T>) => T
Returns the type of the input provided.

Given an input range of `[0, 200]` and an output range of
`[0, 1]`, this function will return a value between `0` and `1`.
The input range must be a linear series of numbers. The output range
can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
Every value in the output range must be of the same type and in the same format.

see example

useCycle

useCycle<T>(...items: T[]): Writable<T> & { next }
Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It is a custom store with a `next` method. Without input, `next` returns the next item in the array. Alternaively, you can set the current index.

see example

• next: (i?: number) => void
  Function that cycles to the next value. An index value can be passed to the function to cycle to a specific index.

useDragControls

() => DragControls
Usually, dragging is initiated by pressing down on a Motion component with a `drag` prop
and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
might want to initiate that dragging from a different component than the draggable one.

By creating a `dragControls` using the useDragControls hook, we can pass this into
the draggable component's `dragControls` prop. It exposes a `start` method
that can start dragging from pointer events on other components.

useReducedMotion

() => Readable<boolean | null>
A function that returns a readable store which holds a boolean value. The value of the store is `true` if we should be using reduced motion based on the current device's Reduced Motion setting.

This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
`x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

see example