Function motion

  • motion<Props>(Component, customMotionComponentConfig?): CustomDomComponent<Props>

  • HTML & SVG components, optimised for use with gestures and animation. These can be used as drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.

    Type Parameters

    • Props extends {}

    Parameters

    • Component: string | ComponentType<PropsWithChildren<Props>>
    • Optional customMotionComponentConfig: CustomMotionComponentConfig

    Returns CustomDomComponent<Props>

Properties

a abbr address animate area article aside audio b base bdi bdo big blockquote body br button canvas caption circle cite clipPath code col colgroup data datalist dd defs del desc details dfn dialog div dl dt ellipse em embed feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence fieldset figcaption figure filter footer foreignObject form g h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe image img input ins kbd keygen label legend li line linearGradient link main map mark marker mask menu menuitem meta metadata meter nav noscript object ol optgroup option output p param path pattern picture polygon polyline pre progress q radialGradient rect rp rt ruby s samp script section select small source span stop strong style sub summary sup svg switch symbol table tbody td text textPath textarea tfoot th thead time title tr track tspan u ul use var video view wbr webview

Properties

a

a: ForwardRefComponent<HTMLAnchorElement, HTMLMotionProps<"a">>

abbr

abbr: ForwardRefComponent<HTMLElement, HTMLMotionProps<"abbr">>

address

address: ForwardRefComponent<HTMLElement, HTMLMotionProps<"address">>

animate

animate: ForwardRefComponent<SVGElement, SVGMotionProps<SVGElement>>

area

area: ForwardRefComponent<HTMLAreaElement, HTMLMotionProps<"area">>

article

article: ForwardRefComponent<HTMLElement, HTMLMotionProps<"article">>

aside

aside: ForwardRefComponent<HTMLElement, HTMLMotionProps<"aside">>

audio

audio: ForwardRefComponent<HTMLAudioElement, HTMLMotionProps<"audio">>

b

b: ForwardRefComponent<HTMLElement, HTMLMotionProps<"b">>

base

base: ForwardRefComponent<HTMLBaseElement, HTMLMotionProps<"base">>

bdi

bdi: ForwardRefComponent<HTMLElement, HTMLMotionProps<"bdi">>

bdo

bdo: ForwardRefComponent<HTMLElement, HTMLMotionProps<"bdo">>

big

big: ForwardRefComponent<HTMLElement, HTMLMotionProps<"big">>

blockquote

blockquote: ForwardRefComponent<HTMLQuoteElement, HTMLMotionProps<"blockquote">>

body

body: ForwardRefComponent<HTMLBodyElement, HTMLMotionProps<"body">>

br

br: ForwardRefComponent<HTMLBRElement, HTMLMotionProps<"br">>

button

button: ForwardRefComponent<HTMLButtonElement, HTMLMotionProps<"button">>

canvas

canvas: ForwardRefComponent<HTMLCanvasElement, HTMLMotionProps<"canvas">>

caption

caption: ForwardRefComponent<HTMLElement, HTMLMotionProps<"caption">>

circle

circle: ForwardRefComponent<SVGCircleElement, SVGMotionProps<SVGCircleElement>>

cite

cite: ForwardRefComponent<HTMLElement, HTMLMotionProps<"cite">>

clipPath

clipPath: ForwardRefComponent<SVGClipPathElement, SVGMotionProps<SVGClipPathElement>>

code

code: ForwardRefComponent<HTMLElement, HTMLMotionProps<"code">>

col

col: ForwardRefComponent<HTMLTableColElement, HTMLMotionProps<"col">>

colgroup

colgroup: ForwardRefComponent<HTMLTableColElement, HTMLMotionProps<"colgroup">>

data

data: ForwardRefComponent<HTMLDataElement, HTMLMotionProps<"data">>

datalist

datalist: ForwardRefComponent<HTMLDataListElement, HTMLMotionProps<"datalist">>

dd

dd: ForwardRefComponent<HTMLElement, HTMLMotionProps<"dd">>

defs

defs: ForwardRefComponent<SVGDefsElement, SVGMotionProps<SVGDefsElement>>

del

del: ForwardRefComponent<HTMLModElement, HTMLMotionProps<"del">>

desc

desc: ForwardRefComponent<SVGDescElement, SVGMotionProps<SVGDescElement>>

details

details: ForwardRefComponent<HTMLDetailsElement, HTMLMotionProps<"details">>

dfn

dfn: ForwardRefComponent<HTMLElement, HTMLMotionProps<"dfn">>

dialog

dialog: ForwardRefComponent<HTMLDialogElement, HTMLMotionProps<"dialog">>

div

div: ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>

dl

dl: ForwardRefComponent<HTMLDListElement, HTMLMotionProps<"dl">>

dt

dt: ForwardRefComponent<HTMLElement, HTMLMotionProps<"dt">>

ellipse

ellipse: ForwardRefComponent<SVGEllipseElement, SVGMotionProps<SVGEllipseElement>>

em

em: ForwardRefComponent<HTMLElement, HTMLMotionProps<"em">>

embed

embed: ForwardRefComponent<HTMLEmbedElement, HTMLMotionProps<"embed">>

feBlend

feBlend: ForwardRefComponent<SVGFEBlendElement, SVGMotionProps<SVGFEBlendElement>>

feColorMatrix

feColorMatrix: ForwardRefComponent<SVGFEColorMatrixElement, SVGMotionProps<SVGFEColorMatrixElement>>

feComponentTransfer

feComponentTransfer: ForwardRefComponent<SVGFEComponentTransferElement, SVGMotionProps<SVGFEComponentTransferElement>>

feComposite

feComposite: ForwardRefComponent<SVGFECompositeElement, SVGMotionProps<SVGFECompositeElement>>

feConvolveMatrix

feConvolveMatrix: ForwardRefComponent<SVGFEConvolveMatrixElement, SVGMotionProps<SVGFEConvolveMatrixElement>>

feDiffuseLighting

feDiffuseLighting: ForwardRefComponent<SVGFEDiffuseLightingElement, SVGMotionProps<SVGFEDiffuseLightingElement>>

feDisplacementMap

feDisplacementMap: ForwardRefComponent<SVGFEDisplacementMapElement, SVGMotionProps<SVGFEDisplacementMapElement>>

feDistantLight

feDistantLight: ForwardRefComponent<SVGFEDistantLightElement, SVGMotionProps<SVGFEDistantLightElement>>

feDropShadow

feDropShadow: ForwardRefComponent<SVGFEDropShadowElement, SVGMotionProps<SVGFEDropShadowElement>>

feFlood

feFlood: ForwardRefComponent<SVGFEFloodElement, SVGMotionProps<SVGFEFloodElement>>

feFuncA

feFuncA: ForwardRefComponent<SVGFEFuncAElement, SVGMotionProps<SVGFEFuncAElement>>

feFuncB

feFuncB: ForwardRefComponent<SVGFEFuncBElement, SVGMotionProps<SVGFEFuncBElement>>

feFuncG

feFuncG: ForwardRefComponent<SVGFEFuncGElement, SVGMotionProps<SVGFEFuncGElement>>

feFuncR

feFuncR: ForwardRefComponent<SVGFEFuncRElement, SVGMotionProps<SVGFEFuncRElement>>

feGaussianBlur

feGaussianBlur: ForwardRefComponent<SVGFEGaussianBlurElement, SVGMotionProps<SVGFEGaussianBlurElement>>

feImage

feImage: ForwardRefComponent<SVGFEImageElement, SVGMotionProps<SVGFEImageElement>>

feMerge

feMerge: ForwardRefComponent<SVGFEMergeElement, SVGMotionProps<SVGFEMergeElement>>

feMergeNode

feMergeNode: ForwardRefComponent<SVGFEMergeNodeElement, SVGMotionProps<SVGFEMergeNodeElement>>

feMorphology

feMorphology: ForwardRefComponent<SVGFEMorphologyElement, SVGMotionProps<SVGFEMorphologyElement>>

feOffset

feOffset: ForwardRefComponent<SVGFEOffsetElement, SVGMotionProps<SVGFEOffsetElement>>

fePointLight

fePointLight: ForwardRefComponent<SVGFEPointLightElement, SVGMotionProps<SVGFEPointLightElement>>

feSpecularLighting

feSpecularLighting: ForwardRefComponent<SVGFESpecularLightingElement, SVGMotionProps<SVGFESpecularLightingElement>>

feSpotLight

feSpotLight: ForwardRefComponent<SVGFESpotLightElement, SVGMotionProps<SVGFESpotLightElement>>

feTile

feTile: ForwardRefComponent<SVGFETileElement, SVGMotionProps<SVGFETileElement>>

feTurbulence

feTurbulence: ForwardRefComponent<SVGFETurbulenceElement, SVGMotionProps<SVGFETurbulenceElement>>

fieldset

fieldset: ForwardRefComponent<HTMLFieldSetElement, HTMLMotionProps<"fieldset">>

figcaption

figcaption: ForwardRefComponent<HTMLElement, HTMLMotionProps<"figcaption">>

figure

figure: ForwardRefComponent<HTMLElement, HTMLMotionProps<"figure">>

filter

filter: ForwardRefComponent<SVGFilterElement, SVGMotionProps<SVGFilterElement>>

footer

footer: ForwardRefComponent<HTMLElement, HTMLMotionProps<"footer">>

foreignObject

foreignObject: ForwardRefComponent<SVGForeignObjectElement, SVGMotionProps<SVGForeignObjectElement>>

form

form: ForwardRefComponent<HTMLFormElement, HTMLMotionProps<"form">>

g

g: ForwardRefComponent<SVGGElement, SVGMotionProps<SVGGElement>>

h1

h1: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h1">>

h2

h2: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h2">>

h3

h3: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h3">>

h4

h4: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h4">>

h5

h5: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h5">>

h6

h6: ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h6">>

head

head: ForwardRefComponent<HTMLHeadElement, HTMLMotionProps<"head">>

header

header: ForwardRefComponent<HTMLElement, HTMLMotionProps<"header">>

hgroup

hgroup: ForwardRefComponent<HTMLElement, HTMLMotionProps<"hgroup">>

hr

hr: ForwardRefComponent<HTMLHRElement, HTMLMotionProps<"hr">>

html

html: ForwardRefComponent<HTMLHtmlElement, HTMLMotionProps<"html">>

i

i: ForwardRefComponent<HTMLElement, HTMLMotionProps<"i">>

iframe

iframe: ForwardRefComponent<HTMLIFrameElement, HTMLMotionProps<"iframe">>

image

image: ForwardRefComponent<SVGImageElement, SVGMotionProps<SVGImageElement>>

img

img: ForwardRefComponent<HTMLImageElement, HTMLMotionProps<"img">>

input

input: ForwardRefComponent<HTMLInputElement, HTMLMotionProps<"input">>

ins

ins: ForwardRefComponent<HTMLModElement, HTMLMotionProps<"ins">>

kbd

kbd: ForwardRefComponent<HTMLElement, HTMLMotionProps<"kbd">>

keygen

keygen: ForwardRefComponent<HTMLElement, HTMLMotionProps<"keygen">>

label

label: ForwardRefComponent<HTMLLabelElement, HTMLMotionProps<"label">>

legend

legend: ForwardRefComponent<HTMLLegendElement, HTMLMotionProps<"legend">>

li

li: ForwardRefComponent<HTMLLIElement, HTMLMotionProps<"li">>

line

line: ForwardRefComponent<SVGLineElement, SVGMotionProps<SVGLineElement>>

linearGradient

linearGradient: ForwardRefComponent<SVGLinearGradientElement, SVGMotionProps<SVGLinearGradientElement>>

link

link: ForwardRefComponent<HTMLLinkElement, HTMLMotionProps<"link">>

main

main: ForwardRefComponent<HTMLElement, HTMLMotionProps<"main">>

map

map: ForwardRefComponent<HTMLMapElement, HTMLMotionProps<"map">>

mark

mark: ForwardRefComponent<HTMLElement, HTMLMotionProps<"mark">>

marker

marker: ForwardRefComponent<SVGMarkerElement, SVGMotionProps<SVGMarkerElement>>

mask

mask: ForwardRefComponent<SVGMaskElement, SVGMotionProps<SVGMaskElement>>

menu

menu: ForwardRefComponent<HTMLElement, HTMLMotionProps<"menu">>

menuitem

menuitem: ForwardRefComponent<HTMLElement, HTMLMotionProps<"menuitem">>

meta

meta: ForwardRefComponent<HTMLMetaElement, HTMLMotionProps<"meta">>

metadata

metadata: ForwardRefComponent<SVGMetadataElement, SVGMotionProps<SVGMetadataElement>>

meter

meter: ForwardRefComponent<HTMLMeterElement, HTMLMotionProps<"meter">>

nav

nav: ForwardRefComponent<HTMLElement, HTMLMotionProps<"nav">>

noscript

noscript: ForwardRefComponent<HTMLElement, HTMLMotionProps<"noscript">>

object

object: ForwardRefComponent<HTMLObjectElement, HTMLMotionProps<"object">>

ol

ol: ForwardRefComponent<HTMLOListElement, HTMLMotionProps<"ol">>

optgroup

optgroup: ForwardRefComponent<HTMLOptGroupElement, HTMLMotionProps<"optgroup">>

option

option: ForwardRefComponent<HTMLOptionElement, HTMLMotionProps<"option">>

output

output: ForwardRefComponent<HTMLOutputElement, HTMLMotionProps<"output">>

p

p: ForwardRefComponent<HTMLParagraphElement, HTMLMotionProps<"p">>

param

param: ForwardRefComponent<HTMLParamElement, HTMLMotionProps<"param">>

path

path: ForwardRefComponent<SVGPathElement, SVGMotionProps<SVGPathElement>>

pattern

pattern: ForwardRefComponent<SVGPatternElement, SVGMotionProps<SVGPatternElement>>

picture

picture: ForwardRefComponent<HTMLElement, HTMLMotionProps<"picture">>

polygon

polygon: ForwardRefComponent<SVGPolygonElement, SVGMotionProps<SVGPolygonElement>>

polyline

polyline: ForwardRefComponent<SVGPolylineElement, SVGMotionProps<SVGPolylineElement>>

pre

pre: ForwardRefComponent<HTMLPreElement, HTMLMotionProps<"pre">>

progress

progress: ForwardRefComponent<HTMLProgressElement, HTMLMotionProps<"progress">>

q

q: ForwardRefComponent<HTMLQuoteElement, HTMLMotionProps<"q">>

radialGradient

radialGradient: ForwardRefComponent<SVGRadialGradientElement, SVGMotionProps<SVGRadialGradientElement>>

rect

rect: ForwardRefComponent<SVGRectElement, SVGMotionProps<SVGRectElement>>

rp

rp: ForwardRefComponent<HTMLElement, HTMLMotionProps<"rp">>

rt

rt: ForwardRefComponent<HTMLElement, HTMLMotionProps<"rt">>

ruby

ruby: ForwardRefComponent<HTMLElement, HTMLMotionProps<"ruby">>

s

s: ForwardRefComponent<HTMLElement, HTMLMotionProps<"s">>

samp

samp: ForwardRefComponent<HTMLElement, HTMLMotionProps<"samp">>

script

script: ForwardRefComponent<HTMLScriptElement, HTMLMotionProps<"script">>

section

section: ForwardRefComponent<HTMLElement, HTMLMotionProps<"section">>

select

select: ForwardRefComponent<HTMLSelectElement, HTMLMotionProps<"select">>

small

small: ForwardRefComponent<HTMLElement, HTMLMotionProps<"small">>

source

source: ForwardRefComponent<HTMLSourceElement, HTMLMotionProps<"source">>

span

span: ForwardRefComponent<HTMLSpanElement, HTMLMotionProps<"span">>

stop

stop: ForwardRefComponent<SVGStopElement, SVGMotionProps<SVGStopElement>>

strong

strong: ForwardRefComponent<HTMLElement, HTMLMotionProps<"strong">>

style

style: ForwardRefComponent<HTMLStyleElement, HTMLMotionProps<"style">>

sub

sub: ForwardRefComponent<HTMLElement, HTMLMotionProps<"sub">>

summary

summary: ForwardRefComponent<HTMLElement, HTMLMotionProps<"summary">>

sup

sup: ForwardRefComponent<HTMLElement, HTMLMotionProps<"sup">>

svg

svg: ForwardRefComponent<SVGSVGElement, SVGMotionProps<SVGSVGElement>>

switch

switch: ForwardRefComponent<SVGSwitchElement, SVGMotionProps<SVGSwitchElement>>

symbol

symbol: ForwardRefComponent<SVGSymbolElement, SVGMotionProps<SVGSymbolElement>>

table

table: ForwardRefComponent<HTMLTableElement, HTMLMotionProps<"table">>

tbody

tbody: ForwardRefComponent<HTMLTableSectionElement, HTMLMotionProps<"tbody">>

td

td: ForwardRefComponent<HTMLTableDataCellElement, HTMLMotionProps<"td">>

text

text: ForwardRefComponent<SVGTextElement, SVGMotionProps<SVGTextElement>>

textPath

textPath: ForwardRefComponent<SVGTextPathElement, SVGMotionProps<SVGTextPathElement>>

textarea

textarea: ForwardRefComponent<HTMLTextAreaElement, HTMLMotionProps<"textarea">>

tfoot

tfoot: ForwardRefComponent<HTMLTableSectionElement, HTMLMotionProps<"tfoot">>

th

th: ForwardRefComponent<HTMLTableHeaderCellElement, HTMLMotionProps<"th">>

thead

thead: ForwardRefComponent<HTMLTableSectionElement, HTMLMotionProps<"thead">>

time

time: ForwardRefComponent<HTMLTimeElement, HTMLMotionProps<"time">>

title

title: ForwardRefComponent<HTMLTitleElement, HTMLMotionProps<"title">>

tr

tr: ForwardRefComponent<HTMLTableRowElement, HTMLMotionProps<"tr">>

track

track: ForwardRefComponent<HTMLTrackElement, HTMLMotionProps<"track">>

tspan

tspan: ForwardRefComponent<SVGTSpanElement, SVGMotionProps<SVGTSpanElement>>

u

u: ForwardRefComponent<HTMLElement, HTMLMotionProps<"u">>

ul

ul: ForwardRefComponent<HTMLUListElement, HTMLMotionProps<"ul">>

use

use: ForwardRefComponent<SVGUseElement, SVGMotionProps<SVGUseElement>>

var

var: ForwardRefComponent<HTMLElement, HTMLMotionProps<"var">>

video

video: ForwardRefComponent<HTMLVideoElement, HTMLMotionProps<"video">>

view

view: ForwardRefComponent<SVGViewElement, SVGMotionProps<SVGViewElement>>

wbr

wbr: ForwardRefComponent<HTMLElement, HTMLMotionProps<"wbr">>

webview

webview: ForwardRefComponent<HTMLWebViewElement, HTMLMotionProps<"webview">>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc