Component
iMessage Interaction in Framer
This is a component inspired by Apple's iMessage chat bubbles, using gooey effect component to add smooth, interactive transitions and a playful touch. Feel free to remix the project and explore how the gooey effect can make your animations perfectly fluid.
About the resource
To use the gooey effect component, simply place it inside the frame you want as a trigger and set its positioning to absolute so it doesn’t occupy any extra space. You can easily adjust the "Intensity" property to fit your design preferences.
To create the iMessage interaction, I designed four variants of the iMessage component. In the primary variant, the setup includes a text message frame with a z-index of 2 and a reactions frame stacked within it with a z-index of 1. This layering ensures the message button appears above the reactions frame.
In the "Mid-To" variant, I set up the starting state of the animation, where the reactions begin as a small circle transitioning into view. With an appear interaction we automatically move to the "End" variant, where the reaction frame fully expands, revealing the emojis inside. Here, the icon scales from 0.5 to 1, the smiley icon fades in with its opacity shifting from 0 to 1, and all emojis become visible as their opacity transitions from 0 to 1.
This animation technique when we move on from a variant to another with click interaction and then move on automatically from there with appear trigger is called “rollover technique”. I talk more about it here.
About the resource
To use the gooey effect component, simply place it inside the frame you want as a trigger and set its positioning to absolute so it doesn’t occupy any extra space. You can easily adjust the "Intensity" property to fit your design preferences.
To create the iMessage interaction, I designed four variants of the iMessage component. In the primary variant, the setup includes a text message frame with a z-index of 2 and a reactions frame stacked within it with a z-index of 1. This layering ensures the message button appears above the reactions frame.
In the "Mid-To" variant, I set up the starting state of the animation, where the reactions begin as a small circle transitioning into view. With an appear interaction we automatically move to the "End" variant, where the reaction frame fully expands, revealing the emojis inside. Here, the icon scales from 0.5 to 1, the smiley icon fades in with its opacity shifting from 0 to 1, and all emojis become visible as their opacity transitions from 0 to 1.
This animation technique when we move on from a variant to another with click interaction and then move on automatically from there with appear trigger is called “rollover technique”. I talk more about it here.
About the resource
To use the gooey effect component, simply place it inside the frame you want as a trigger and set its positioning to absolute so it doesn’t occupy any extra space. You can easily adjust the "Intensity" property to fit your design preferences.
To create the iMessage interaction, I designed four variants of the iMessage component. In the primary variant, the setup includes a text message frame with a z-index of 2 and a reactions frame stacked within it with a z-index of 1. This layering ensures the message button appears above the reactions frame.
In the "Mid-To" variant, I set up the starting state of the animation, where the reactions begin as a small circle transitioning into view. With an appear interaction we automatically move to the "End" variant, where the reaction frame fully expands, revealing the emojis inside. Here, the icon scales from 0.5 to 1, the smiley icon fades in with its opacity shifting from 0 to 1, and all emojis become visible as their opacity transitions from 0 to 1.
This animation technique when we move on from a variant to another with click interaction and then move on automatically from there with appear trigger is called “rollover technique”. I talk more about it here.
The four variants of the imessage animation component.
The four variants of the imessage animation component.
The four variants of the imessage animation component.
