Fun Notification Animation in Framer

Copy component

Fun Notification 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

New

New

New

Component

Fun Notification Animation in Framer

This is a fun notification animation recreated in Framer from Alexander’s work. Remix to explore how it’s built without code, or simply copy-paste the component straight into your own project.

image of Nandi Muzsik
image of Prianca S.
Image of Alexander Avdeev

Created by

,

and

Error notification with retry icon and count
Error notification with retry icon and count
Error notification with retry icon and count

About the resource

To create this notification animation in Framer, I set up a component with two variants: default and expanded. In the default state, I stacked three cards—one set to relative, and the other two on absolute with a slight scale down. Each card is a component with a hover state for the shadow.

The button has two text layers: one in relative position, and the other just below it on absolute with opacity 0. In the expanded variant, all the cards are set to relative so they fan out, and the second text fades in by adjusting its position and opacity. Everything’s wrapped in a container, and I added mouse enter and leave interactions to trigger the animation.

About the resource

To create this notification animation in Framer, I set up a component with two variants: default and expanded. In the default state, I stacked three cards—one set to relative, and the other two on absolute with a slight scale down. Each card is a component with a hover state for the shadow.

The button has two text layers: one in relative position, and the other just below it on absolute with opacity 0. In the expanded variant, all the cards are set to relative so they fan out, and the second text fades in by adjusting its position and opacity. Everything’s wrapped in a container, and I added mouse enter and leave interactions to trigger the animation.

About the resource

To create this notification animation in Framer, I set up a component with two variants: default and expanded. In the default state, I stacked three cards—one set to relative, and the other two on absolute with a slight scale down. Each card is a component with a hover state for the shadow.

The button has two text layers: one in relative position, and the other just below it on absolute with opacity 0. In the expanded variant, all the cards are set to relative so they fan out, and the second text fades in by adjusting its position and opacity. Everything’s wrapped in a container, and I added mouse enter and leave interactions to trigger the animation.

Expanded notification with multiple error messages

The default and expanded variants of the notification component.

Expanded notification with multiple error messages

The default and expanded variants of the notification component.

Expanded notification with multiple error messages

The default and expanded variants of the notification 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

  • Framer digital typewriter component with animated typing effect

    Digital Typewriter Component for Framer

    Component

    Framer digital typewriter component with animated typing effect

    Digital Typewriter Component for Framer

    Component

    Framer digital typewriter component with animated typing effect

    Digital Typewriter Component for Framer

    Component

  • Framer Liquid Glass UI with frosted blur button and dark gradient background

    Liquid Glass Element in Framer

    Component

    Framer Liquid Glass UI with frosted blur button and dark gradient background

    Liquid Glass Element in Framer

    Component

    Framer Liquid Glass UI with frosted blur button and dark gradient background

    Liquid Glass Element in Framer

    Component