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

  • Framer interface displaying 'Cross component interactions' with a glowing blue Framer logo and a clickable phone icon labeled 'Click Me' in the bottom right corner

    Cross Component Interactions in Framer

    Component

    Framer interface displaying 'Cross component interactions' with a glowing blue Framer logo and a clickable phone icon labeled 'Click Me' in the bottom right corner

    Cross Component Interactions in Framer

    Component

    Framer interface displaying 'Cross component interactions' with a glowing blue Framer logo and a clickable phone icon labeled 'Click Me' in the bottom right corner

    Cross Component Interactions in Framer

    Component

  • Interactive blue bouncy button with 'Get started' label and cursor hover

    Bouncy Skeuomorphic Button in Framer

    Component

    Interactive blue bouncy button with 'Get started' label and cursor hover

    Bouncy Skeuomorphic Button in Framer

    Component

    Interactive blue bouncy button with 'Get started' label and cursor hover

    Bouncy Skeuomorphic Button in Framer

    Component