Fluid Notification Animation in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Fluid Notification Animation in Framer

View demo

Copy component

Remix project

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to make your first $1,000 with Framer

Free training

How to make your first $1,000 with Framer

Free training

Interaction

Fluid Notification Animation in Framer

This is a Framer recreation of the smooth notification animation originally made by Preet Mishra. Feel free to remix the project and explore how it works. It’s built without writing a single line of code. Pretty amazing, right?

Created by

Nandi

and

Preet

Fluid notification UI with message about gooey effect in Framer

About the resource

You might already know how to create nicely animated interactions in Framer using components and variants. But what’s the secret to making them look as smooth and fluid as this example?

Well, here’s the secret: it’s the Gooey Effect component. You just need to place it inside a common frame with the elements you want to “goo together.”

About the resource

You might already know how to create nicely animated interactions in Framer using components and variants. But what’s the secret to making them look as smooth and fluid as this example?

Well, here’s the secret: it’s the Gooey Effect component. You just need to place it inside a common frame with the elements you want to “goo together.”

About the resource

You might already know how to create nicely animated interactions in Framer using components and variants. But what’s the secret to making them look as smooth and fluid as this example?

Well, here’s the secret: it’s the Gooey Effect component. You just need to place it inside a common frame with the elements you want to “goo together.”

Framer Gooey Effect component settings with intensity control — The secret Gooey Effect component within the Navigation component.

If you want to see more examples of how this special component can be used to create fluid animations, be sure to check out this tutorial.

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

More resources

View all

Hover Text Repeat Effect in Framer
Interaction
Hover Text Repeat Effect in Framer
Interaction
Unusual FAQs Section in Framer
Interaction
Unusual FAQs Section in Framer
Interaction