Motion Value API

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

InputRange

number[]
An input range must be a linear series of numbers.

MotionPoint

{x: MotionValue <number>, y: MotionValue <number>}

MotionValue

class<T>
`MotionValue` is used to track the state and velocity of motion values.

see example

• subscribe: (v: Subscriber ) => Unsubscriber
  Subscribe method to make MotionValue compatible with Svelte store. Returns a unsubscribe function.
• update: ( callback: (value:T) => T ) => void
  Update method to make MotionValue compatible with Svelte writable store.
• onChange: (v: Subscriber ) => Unsubscriber
  Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.
• set: (value: T, render: boolean) => void
  Sets the state of the `MotionValue`. Optional render option: whether to notify render subscribers. Defaults to `true`
• get: () => T
  Returns the latest state of `MotionValue`
• getPrevious: () => T
  Returns the latest velocity of `MotionValue`
• getVelocity: () => number
  Returns the latest velocity of `MotionValue`
• clearListeners: () => void
  Removes all subscriptions to this `MotionValue`
• updateAndNotify: (value: T, render: boolean) => void
  Like `set` but does not trigger animation eg. on `Spring`
• stop: () => void
  Stop the currently active animation.
• isAnimating: () => boolean
  Returns `true` if this value is currently animating.
• destroy: () => void
  Destroy and clean up subscribers to this `MotionValue`. The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually created a `MotionValue` via the `motionValue` function.

MultiTransformer

<Input,Output>(i:Input[]) => Output
An array of MotionValue s that will pass their latest values through `transform` to update the returned MotionValue .

ScrollMotionValues

interface
Collection of scroll related motion values returned by useElementScroll or useViewportScroll .

• scrollX: MotionValue <number>
  Horizontal scroll distance in pixels.
• scrollY: MotionValue <number>
  Vertical scroll distance in pixels.
• scrollXProgress: MotionValue <number>
  Horizontal scroll progress between `0` and `1`.
• scrollYProgress: MotionValue <number>
  Vertical scroll progress between `0` and `1`.

SingleTransformer

<Input,Output>(i:Input) => Output
A function that accepts the latest value from `input` and returns a new value.

Subscriber

(value: T) => void
Function to react on changes in motion value

Unsubscriber

() => void
Function to call when motion value or store should not react on subscription anymore. From 'svelte/store'.

useElementScroll

(ref?: {current?:Node}) => ScrollMotionValues
Returns MotionValues that update when the provided element scrolls:

- `scrollX` - Horizontal scroll distance in pixels.
- `scrollY` - Vertical scroll distance in pixels.
- `scrollXProgress` - Horizontal scroll progress between `0` and `1`.
- `scrollYProgress` - Vertical scroll progress between `0` and `1`.

This element must be set to `overflow: scroll` on either or both axes to report scroll offset.

useMotionTemplate

(fragments: TemplateStringsArray, ...values: MotionValue []) => MotionValue <string> & { reset }
Combine multiple motion values into a new one using a string template literal.

see example

• reset: (fragments: TemplateStringsArray, ...values: MotionValue []) => void
  Update the props of the `MotionTemplate`.

useMotionValue

(initialValue : T) => MotionValue <T>
Creates a MotionValue to track the state and velocity of a value.

Usually, these are created automatically. For advanced use-cases, like use with useTransform , you
can create MotionValue s externally
and pass them into the animated component via the `style` prop.

see example

useSpring

(source: MotionValue | number, config?: SpringOptions ) => MotionValue <T> & { reset }
Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriberto another `MotionValue`.

• reset: (source: MotionValue | number, config?: SpringOptions ) => void
  Update the props of the `Spring`.

useTransform

(value: MotionValue <number>, inputRange: InputRange , outputRange: O[], options?: TransformOptions <O>) => MotionValue <O> & { reset }
Create a MotionValue that transforms the output of another MotionValue by mapping it from one range of values into another.
The input range must be a linear series of numbers. The output range
can be any value type supported by Svelte Motion: numbers, colors, shadows, etc.

Every value in the output range must be of the same type and in the same format.

or

(input: MotionValue <I>, transformer: SingleTransformer <I, O>) => MotionValue <O> & { reset}
Create a MotionValue that transforms the output of another MotionValue through a function.

or

(input: MotionValue <string | number>[], transformer: MultiTransformer <I, O>) => MotionValue <O> & { reset }
Pass an array of MotionValue s and a function to combine them.

see example

• reset: (...anyOfThe3Options) => void
  Update the props of the `useTransform`. Any of the three initialization options can be used.

useVelocity

(value: MotionValue <number>) => MotionValue <number>
Creates a MotionValue that updates when the velocity of the provided MotionValue changes.

see example

• reset: (value: MotionValue <number>) => void
  Update the props of the velocity motion value.

useViewportScroll

(ref?: {current?:Node}) => ScrollMotionValues
Returns MotionValues that update when the viewport scrolls.

**Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
values as this breaks the browser's capability to accurately measure the page length.