Toast Animation in Framer

Copy component

Toast 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

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.

image of Nandi Muzsik
image of Prianca S.
Image of Alvish

Created by

,

and

Dark-mode UI toast notification from Clerk showing a warning about running in keyless mode, with a 'Claim keys' button and a close icon
Dark-mode UI toast notification from Clerk showing a warning about running in keyless mode, with a 'Claim keys' button and a close icon
Dark-mode UI toast notification from Clerk showing a warning about running in keyless mode, with a 'Claim keys' button and a close icon

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.

Side-by-side animation frames of a dark-themed Clerk toast notification expanding and minimizing, with 'Clerk is in keyless mode' message and 'Claim keys' button

The two variants of the toast component.

Side-by-side animation frames of a dark-themed Clerk toast notification expanding and minimizing, with 'Clerk is in keyless mode' message and 'Claim keys' button

The two variants of the toast component.

Side-by-side animation frames of a dark-themed Clerk toast notification expanding and minimizing, with 'Clerk is in keyless mode' message and 'Claim keys' button

The two variants of the toast 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

  • Minimal floating action button with a plus icon on a dark background

    Floating Action Button in Framer

    Component

    Minimal floating action button with a plus icon on a dark background

    Floating Action Button in Framer

    Component

    Minimal floating action button with a plus icon on a dark background

    Floating Action Button in Framer

    Component

  • Horizontal ticker menu with Mojave selected and macOS names listed

    Ticker Menu in Framer

    Component

    Horizontal ticker menu with Mojave selected and macOS names listed

    Ticker Menu in Framer

    Component

    Horizontal ticker menu with Mojave selected and macOS names listed

    Ticker Menu in Framer

    Component