Search code examples
reactjsanimationhtml5-canvasframer-motion

Can i create a blob animation using framer motion?

For reference, I'm talking about the dark-gray space in the upper left of Discord's Login Page, here is a screenshot:

enter image description here

I know that this blob or "wobbly edge" effect (in the top left corner) can be created using a canvas element and animated quadratic bezier curves.

In my nextjs app, i am using framer motion for all my animations. Its great, quick and easy-to-use. So can i use also framer motion to make this blob effect like on the discord login page or can i create such animations only on a canvas element?

Solution

  • You can for sure use framer motion for this. You'd want to use it to animate an SVG to create this effect, unless you're wanting some form of interactivity, then I'd maybe employ canvas.

    To actually generate a blob svg like this to animate, check out some of the resources found here: https://css-tricks.com/blobs/

    such as: https://www.blobmaker.app/

    Alternatively, you could make an SVG yourself in something like Illustrator, Affinity Designer, or most other vector drawing apps.