Liquid Bowl Animation in Framer

Liquid Bowl Animation in Framer

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

Animation

Liquid Bowl Animation in Framer

This liquid bowl animation was recreated in Framer, inspired by Irshad’s original work. It’s a fun, loopy motion that’s surprisingly simple to build with native Framer tools. Feel free to remix it and make it your own.

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

Created by

,

and

Glowing glass bowl half-filled with blue liquid
Glowing glass bowl half-filled with blue liquid
Glowing glass bowl half-filled with blue liquid

About the resource

To make this liquid bowl animation in Framer, I just played around with a bunch of frames layered smartly. The base starts with the inner bowl layer—inside that, I added a depth frame and a soft light frame to give it that subtle glowing feel. Then I added a loop animation to this inner layer, rotating it back and forth to about -32° to get that nice, gentle tilt. I also looped the light frame inside so it moves along with the tilt and adds a fluid kind of shimmer.

On top of that, I built the mouth of the bowl using two oval frames—one inside the other—to shape the edge of the opening. This whole mouth section is stacked along with the inner bowl layer inside a main bowl frame.

Now for the final touch: I added another loop animation to the main bowl layer itself, but this one rotates in the opposite direction—around +30°—which gives the whole thing a more liquid, sloshy feel. Then I dropped in a shadow frame and a subtle blur image underneath to pull it all together and make it sit nicely on the canvas.

About the resource

To make this liquid bowl animation in Framer, I just played around with a bunch of frames layered smartly. The base starts with the inner bowl layer—inside that, I added a depth frame and a soft light frame to give it that subtle glowing feel. Then I added a loop animation to this inner layer, rotating it back and forth to about -32° to get that nice, gentle tilt. I also looped the light frame inside so it moves along with the tilt and adds a fluid kind of shimmer.

On top of that, I built the mouth of the bowl using two oval frames—one inside the other—to shape the edge of the opening. This whole mouth section is stacked along with the inner bowl layer inside a main bowl frame.

Now for the final touch: I added another loop animation to the main bowl layer itself, but this one rotates in the opposite direction—around +30°—which gives the whole thing a more liquid, sloshy feel. Then I dropped in a shadow frame and a subtle blur image underneath to pull it all together and make it sit nicely on the canvas.

About the resource

To make this liquid bowl animation in Framer, I just played around with a bunch of frames layered smartly. The base starts with the inner bowl layer—inside that, I added a depth frame and a soft light frame to give it that subtle glowing feel. Then I added a loop animation to this inner layer, rotating it back and forth to about -32° to get that nice, gentle tilt. I also looped the light frame inside so it moves along with the tilt and adds a fluid kind of shimmer.

On top of that, I built the mouth of the bowl using two oval frames—one inside the other—to shape the edge of the opening. This whole mouth section is stacked along with the inner bowl layer inside a main bowl frame.

Now for the final touch: I added another loop animation to the main bowl layer itself, but this one rotates in the opposite direction—around +30°—which gives the whole thing a more liquid, sloshy feel. Then I dropped in a shadow frame and a subtle blur image underneath to pull it all together and make it sit nicely on the canvas.

Rotated glowing bowl with blue liquid and transform handles

The main bowl layer rotate 30 degree by loop effect.

Rotated glowing bowl with blue liquid and transform handles

The main bowl layer rotate 30 degree by loop effect.

Rotated glowing bowl with blue liquid and transform handles

The main bowl layer rotate 30 degree by loop effect.

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

  • 3D text ring orbiting globe made in Framer

    3D Ring Text Animation in Framer

    Animation

    3D text ring orbiting globe made in Framer

    3D Ring Text Animation in Framer

    Animation

    3D text ring orbiting globe made in Framer

    3D Ring Text Animation in Framer

    Animation

  • 3D book mockup of The Revolt of the Public with blue cover

    3D Shiny Book Interaction in Framer

    Animation

    3D book mockup of The Revolt of the Public with blue cover

    3D Shiny Book Interaction in Framer

    Animation

    3D book mockup of The Revolt of the Public with blue cover

    3D Shiny Book Interaction in Framer

    Animation