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