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.
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.
The open and close state variants of the chat modal component.
The open and close state variants of the chat modal component.
The open and close state variants of the chat modal component.
