Morpher

Benjamin den Boer

Open in Framer X

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
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree