Overview

Morph allows you to transition seamlessly between two or more SVG shapes. Draw any solid shape on the Canvas, connect their Graphic containers to the Morph component, and preview to start animating. Customize delays, loops, duration, pauses between morphs and more. Use any spring or easing curve included within Framer Motion.

For any questions, feel free to reach out on Twitter.

Spring Props

Property	Type	Description	Default
Delay	number	Initial delay in seconds.	0
Pause	number	Delay between morphs in seconds.	0
Stiffness	number	Spring stiffness.	300
Damping	number	Spring damping.	30
Mass	number	Spring mass.	1
Loop	boolean	Repeats entire sequence.	true

Ease Props

Property	Type	Description	Default
Duration	boolean	Inherit or remove.	inherit
Delay	number	Delay in seconds.	0
Pause	number	Animation iteration count.	1
Ease	boolean	Type of ease curve.	Preset
Presets	enum	Built-in easing presets.	Ease In Out
Bezier	string	Custom cubic beziers.	0.645, 0.045, 0.355, 1
Loop	boolean	Repeats entire sequence.	true