Component
Toast Animation in Framer
This is a toast animation recreated in Framer from by Alvish’s work. Feel free to remix the project and explore how to achieve this effect in Framer without writing any code.
Created by
About the resource
To create this toast animation in Framer, I set up two variants of the toast component: expanded and minimized, with a text shimmer component used for the title text. I also created a button component with a default variant featuring a hover state and a smaller variant. I connected the interactions by linking the minimize icon to trigger the transition from the default to the minimized variant, and then the small button to expand it back to the default state.
About the resource
To create this toast animation in Framer, I set up two variants of the toast component: expanded and minimized, with a text shimmer component used for the title text. I also created a button component with a default variant featuring a hover state and a smaller variant. I connected the interactions by linking the minimize icon to trigger the transition from the default to the minimized variant, and then the small button to expand it back to the default state.
About the resource
To create this toast animation in Framer, I set up two variants of the toast component: expanded and minimized, with a text shimmer component used for the title text. I also created a button component with a default variant featuring a hover state and a smaller variant. I connected the interactions by linking the minimize icon to trigger the transition from the default to the minimized variant, and then the small button to expand it back to the default state.
The two variants of the toast component.
The two variants of the toast component.
The two variants of the toast component.
