Motion 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.

Motion

SvelteComponent<Props: MotionProps & { isSVG?:boolean,forwardMotionProps?:boolean }, Events: {}, Slots: MotionSlots >

• isSVG: boolean
  set to true if the component receiving the motion action is an svg-element like `circle` or `path`. Should not be set to true for `svg` tags.
• forwardMotionProps: boolean
  

MotionAdvancedProps

interface

• custom?: any
  Custom data to use to resolve dynamic variants differently for each animating component.
• inherit?: boolean
  Set to `false` to prevent inheriting variant changes from its parent.

MotionProps

interface extends AnimationProps , VisualElementLifecycles , PanHandlers , TapHandlers , HoverHandlers , FocusHandlers , DraggableProps , LayoutProps , MotionAdvancedProps
Motion props are categorized by the feature they use. Eg. if you want to handle `tap` look for TapHandlers

• initial: boolean | Target | VariantLabels
  Properties, variant label or array of variant labels to start in.
  
  Set to `false` to initialise with the values in `animate` (disabling the mount animation)
• style: MotionStyle
  The React DOM `style` prop, enhanced with support for MotionValue s and separate `transform` values
• transformTemplate: (transform: TransformProperties , generatedTransform: string) => string
  By default, Svelte Motion generates a `transform` property with a sensible transform order. `transformTemplate`
  can be used to create a different order, or to append/preprend the automatically generated `transform` property.

MotionSVGPathProperties

interface

• pathLength: number | MotionValue | CustomValueType
  
• pathOffset: number | MotionValue | CustomValueType
  
• pathSpacing: number | MotionValue | CustomValueType
  

MotionSlots

{default: { motion: (n: Node) => void, props: object}}
Svelte Motion provides a default slot with two slot props.

• motion: action
  pass this action down to the child component you wish to animate.
• props: object
  All unused props from the motion component can be passed down to the motion component via slot-prop `props`

MotionStyle

CSSProperties & MotionTransform & MotionSVGPathProperties
CSSProperties can be basically everything CSS has to offer. Pass as object (React style, eg. `background-color: red` as `{backgroundColor:'red'}`)

MotionTransform

interface

• x, y, z: string | number | MotionValue | CustomValueType
  
• translateX, translateY, translateZ: string | number | MotionValue | CustomValueType
  
• rotate, rotateX, rotateY, rotateZ: string | number | MotionValue | CustomValueType
  
• scale, scaleX, scaleY, scaleZ: string | number | MotionValue | CustomValueType
  
• skew, skewX, skewY, skewZ: string | number | MotionValue | CustomValueType
  
• originX, originY, originZ: string | number | MotionValue | CustomValueType
  
• perspective: string | number | MotionValue | CustomValueType
  
• transformPerspective: string | number | MotionValue | CustomValueType
  

ResolvedValues

{[key: string] : string | number}
A generic set of string/number values

SVGPathProperties

interface

• pathLength: number
  
• pathOffset: number
  
• pathSpacing: number
  

Target

interface
As target you can supply an object with nearly all CSS properties, SVG attributes, TransformProperties and SVGPathProperties . All attibutes can be of CustomValueType .

TargetAndTransition

TargetWithKeyframes & { transition?: Transition , transitionEnd?: Target }

TargetResolver

(custom: any, current: Target , velocity: Target ) => TargetAndTransition

TargetWithKeyframes

interface
Like Target , but every attribute can also be filled as keyframes,

Example: { color: ["#123456", "#234567", "#ffffff"], x: 100}

TransformProperties

interface

• x, y, z: string | number
  
• translateX, translateY, translateZ: string | number
  
• rotate, rotateX, rotateY, rotateZ: string | number
  
• scale, scaleX, scaleY, scaleZ: string | number
  
• skew, skewX, skewY, skewZ: string | number
  
• originX, originY, originZ: string | number
  
• perspective: string | number
  
• transformPerspective: string | number
  

Variant

TargetAndTransition | TargetResolver

VariantLabels

string | string[]
Either a string, or array of strings, that reference variants defined via the `variants` prop.

Variants

{[key: string]: Variant }

isValidMotionProp

(key: string) => boolean
Check whether a prop name is a valid `MotionProp` key (see MotionProps ).