Morphing Chat Modal Animation in Framer

Copy component

Morphing Chat Modal Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Morphing Chat Modal Animation in Framer

This is a morphing chat modal animation recreated in Framer from Jhey's original work. Built entirely without code, this shows how effortlessly you can recreate such micro-interactions right inside Framer.

image of Nandi Muzsik
image of Prianca S.
profile image of Jhey Tompkins

Created by

,

and

Minimalistic white chat interface with input text field reading 'What do you want to build?' and UI buttons for expanding, sending, and adding elements
Minimalistic white chat interface with input text field reading 'What do you want to build?' and UI buttons for expanding, sending, and adding elements
Minimalistic white chat interface with input text field reading 'What do you want to build?' and UI buttons for expanding, sending, and adding elements

About the resource

To create the morphing chat modal animation in Framer, I first built out the open state with all the chat content in place—just like the original. Once everything was set, I pinned the icons so they’d stay in position during the transition. Then, I set the open state variant’s overflow to hidden so things stay nicely masked during the animation. Next, I moved on to the closed state, where I resized the modal down into a small circular button and kept only the logo icon visible. After that, I set up a simple click interaction to switch between the two states.

About the resource

To create the morphing chat modal animation in Framer, I first built out the open state with all the chat content in place—just like the original. Once everything was set, I pinned the icons so they’d stay in position during the transition. Then, I set the open state variant’s overflow to hidden so things stay nicely masked during the animation. Next, I moved on to the closed state, where I resized the modal down into a small circular button and kept only the logo icon visible. After that, I set up a simple click interaction to switch between the two states.

About the resource

To create the morphing chat modal animation in Framer, I first built out the open state with all the chat content in place—just like the original. Once everything was set, I pinned the icons so they’d stay in position during the transition. Then, I set the open state variant’s overflow to hidden so things stay nicely masked during the animation. Next, I moved on to the closed state, where I resized the modal down into a small circular button and kept only the logo icon visible. After that, I set up a simple click interaction to switch between the two states.

Expandable chat input field labeled 'What do you want to build?' with a close button flow

The open and close state variants of the chat modal component.

Expandable chat input field labeled 'What do you want to build?' with a close button flow

The open and close state variants of the chat modal component.

Expandable chat input field labeled 'What do you want to build?' with a close button flow

The open and close state variants of the chat modal component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Customizable halftone generator for Framer, showcasing colorful retro-style halftone patterns applied to images

    Halftone Generator Component for Framer

    Component

    Customizable halftone generator for Framer, showcasing colorful retro-style halftone patterns applied to images

    Halftone Generator Component for Framer

    Component

    Customizable halftone generator for Framer, showcasing colorful retro-style halftone patterns applied to images

    Halftone Generator Component for Framer

    Component

  • Isometric 3D blocks with golden icons

    Isometric 3D Icons in Framer

    Component

    Isometric 3D blocks with golden icons

    Isometric 3D Icons in Framer

    Component

    Isometric 3D blocks with golden icons

    Isometric 3D Icons in Framer

    Component