SDK State
This feature is available with Motion+
This feature is available with Motion+
This feature is available with Motion+
The Motion Studio SDK provides some basic state models for handling animation editing.
TransitionState
Transitions represent Motion's animation options.
TransitionState is always created with both easing and spring values, with type determining which is currently active, to allow for easy switching between transition type without dropping state.
import { TransitionState } from "motion-studio" const state = new TransitionState()
The format is as following:
type TransitionType = "easing" | "spring" interface EasingConfig { duration: number ease: BezierDefinition } interface SpringConfig { duration: number bounce: number stiffness: number damping: number mass: number type: "time" | "physics" isVisualDuration: boolean } interface TransitionState { type: TransitionType easing: EasingConfig spring: SpringConfig }
URL serialisation
These utilities allow you to serialise the TransitionState into a URL query parameter, and back out of a URL, enabling shareable configuration links.
toShareQueryString
Serialises a TransitionState object into a URL query string.
import { toShareQueryString } from "motion-studio" const queryString = toShareQueryString(state) // Output: "transition=%7B%22type%22%3A%22spring%22...%7D"
fromShareURL
Parses a new TransitionState out of a full URL string. Returns null if the transition parameter is missing or invalid.
import { fromShareURL } from "motion-studio" const state = fromShareURL(window.location.href)
The Motion Studio SDK provides some basic state models for handling animation editing.
TransitionState
Transitions represent Motion's animation options.
TransitionState is always created with both easing and spring values, with type determining which is currently active, to allow for easy switching between transition type without dropping state.
import { TransitionState } from "motion-studio" const state = new TransitionState()
The format is as following:
type TransitionType = "easing" | "spring" interface EasingConfig { duration: number ease: BezierDefinition } interface SpringConfig { duration: number bounce: number stiffness: number damping: number mass: number type: "time" | "physics" isVisualDuration: boolean } interface TransitionState { type: TransitionType easing: EasingConfig spring: SpringConfig }
URL serialisation
These utilities allow you to serialise the TransitionState into a URL query parameter, and back out of a URL, enabling shareable configuration links.
toShareQueryString
Serialises a TransitionState object into a URL query string.
import { toShareQueryString } from "motion-studio" const queryString = toShareQueryString(state) // Output: "transition=%7B%22type%22%3A%22spring%22...%7D"
fromShareURL
Parses a new TransitionState out of a full URL string. Returns null if the transition parameter is missing or invalid.
import { fromShareURL } from "motion-studio" const state = fromShareURL(window.location.href)
The Motion Studio SDK provides some basic state models for handling animation editing.
TransitionState
Transitions represent Motion's animation options.
TransitionState is always created with both easing and spring values, with type determining which is currently active, to allow for easy switching between transition type without dropping state.
import { TransitionState } from "motion-studio" const state = new TransitionState()
The format is as following:
type TransitionType = "easing" | "spring" interface EasingConfig { duration: number ease: BezierDefinition } interface SpringConfig { duration: number bounce: number stiffness: number damping: number mass: number type: "time" | "physics" isVisualDuration: boolean } interface TransitionState { type: TransitionType easing: EasingConfig spring: SpringConfig }
URL serialisation
These utilities allow you to serialise the TransitionState into a URL query parameter, and back out of a URL, enabling shareable configuration links.
toShareQueryString
Serialises a TransitionState object into a URL query string.
import { toShareQueryString } from "motion-studio" const queryString = toShareQueryString(state) // Output: "transition=%7B%22type%22%3A%22spring%22...%7D"
fromShareURL
Parses a new TransitionState out of a full URL string. Returns null if the transition parameter is missing or invalid.
import { fromShareURL } from "motion-studio" const state = fromShareURL(window.location.href)
