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

  • Dithered black and white artwork of dragon on cliff under moonligh

    Dither Component for Framer

    Component

    Dithered black and white artwork of dragon on cliff under moonligh

    Dither Component for Framer

    Component

    Dithered black and white artwork of dragon on cliff under moonligh

    Dither Component for Framer

    Component

  • Geometric loading animation with blue and white zigzag path

    Fun 3D Loader in Framer

    Component

    Geometric loading animation with blue and white zigzag path

    Fun 3D Loader in Framer

    Component

    Geometric loading animation with blue and white zigzag path

    Fun 3D Loader in Framer

    Component