Gooey Effect for Framer

Copy component

Gooey Effect for 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

Gooey Effect for Framer

This is a gooey effect component for Framer that adds a smooth, liquid-like transition to any frame. It’s perfect for creating playful buttons or eye-catching animations. Remix the project to explore and add a fluid touch to your designs!

image of Nandi Muzsik
image of Prianca S.
image of Isaac Roberts

Created by

Interactive card highlighting Framer University with over 90 lessons and 250+ resources since 2022
Interactive card highlighting Framer University with over 90 lessons and 250+ resources since 2022
Interactive card highlighting Framer University with over 90 lessons and 250+ resources since 2022

About the resource

It is super easy to add this morphing gooey effect to your websites. Simply place the component in a container frame (that does't have any fill color) set it to absolute positioning so it doesn't take up any space, and now all frames within that container will have the gooey effect. Then, tweak the intensity to get the perfect fluid effect for your design.

Please note: This effect is not supported in Safari and Firefox, so it has been disabled in these browsers. The effect also doesn't have support on iOS mobile devices.

About the resource

It is super easy to add this morphing gooey effect to your websites. Simply place the component in a container frame (that does't have any fill color) set it to absolute positioning so it doesn't take up any space, and now all frames within that container will have the gooey effect. Then, tweak the intensity to get the perfect fluid effect for your design.

Please note: This effect is not supported in Safari and Firefox, so it has been disabled in these browsers. The effect also doesn't have support on iOS mobile devices.

About the resource

It is super easy to add this morphing gooey effect to your websites. Simply place the component in a container frame (that does't have any fill color) set it to absolute positioning so it doesn't take up any space, and now all frames within that container will have the gooey effect. Then, tweak the intensity to get the perfect fluid effect for your design.

Please note: This effect is not supported in Safari and Firefox, so it has been disabled in these browsers. The effect also doesn't have support on iOS mobile devices.

Gooey component with adjustable intensity set to 10 for dynamic visual effects

The gooey component property in Framer.

Gooey component with adjustable intensity set to 10 for dynamic visual effects

The gooey component property in Framer.

Gooey component with adjustable intensity set to 10 for dynamic visual effects

The gooey component property in Framer.

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

  • Animated Light Rays effect for Framer with call-to-action button to remix the project

    Light Rays Component for Framer

    Component

    Animated Light Rays effect for Framer with call-to-action button to remix the project

    Light Rays Component for Framer

    Component

    Animated Light Rays effect for Framer with call-to-action button to remix the project

    Light Rays Component for Framer

    Component

  • Four 3D book covers with titles for tech tutorials on a dark background

    3D Book Open Hover in Framer

    Component

    Four 3D book covers with titles for tech tutorials on a dark background

    3D Book Open Hover in Framer

    Component

    Four 3D book covers with titles for tech tutorials on a dark background

    3D Book Open Hover in Framer

    Component