Make and animate Metaballs with Webflow

Metaballs are, in computer graphics, organic-looking n-dimensional objects. The technique for rendering metaballs was invented by Jim Blinn in the early 1980s.

Metaballs can be made with Webflow using simple CSS filters from the Effects panel. Adding Interactions with scroll triggers, you can animate them like the ones on the background of this page.

Hover over the frame and move horizontally

Move your phone or tablet from left to right

Making Metaballs

The example above is made of two divs acting as metaballs.

The principle and CSS properties : metaball-divs must be placed inside of two nested divs. CSS filters have to be applied on the two parent divs.

CSS properties:

.outer-metaballs-container {filter: brightness(100%) contrast(1200%);}
.inner-metaballs-container {filter: blur(20px)}

Also, there must be a white background somewhere for the effects of brightness and contrast filters to reveal (or a black one if the balls are white). Here it's set on the parent of the outer cell element.

step 2 Apply the blur to the inner container div

step 3 Apply the brightness and Contrast CSS filters to the outer div. You can vary the Contrast to get sharper or smoother metaballs.

Step 4 Animate using a pair of onLoad Interactions, to obtain a live metaballs effect

Making metaballs with HTML and CSS can be considered a CSS practical video effect. The balls and their filters are rendered for every frame, and the effect consist in pixel blending together after being applied two opposite filters, blur and contrast. It comes with a lot of limitations, such as not being able to control the color of the balls or give them background-images. However, there is a lot to explore and you can discover many interesting effects by varying the background color of the parents elements and the colors of the balls.

Animating Metaballs on the page background

Building the background effect shown on this page using Webflow Interactions (and a tiny line of custom CSS).

There are some differences between what's happening in the page background here and the experiment we just built above. Most importantly, the metaballs aren't on a white or black background, which we saw is mandatory for the effect to work.

Planning the animation

It doesn't hurt to know where you go, so it's the right tome to pick some pencils and plan ahead. We want to create 4 scenes that will be triggered while the page is scrolling. Each time, we'll have 5 metaballs moving and changing size, interacting with each others. The animation needs to works with all screen sizes.

Updating the structure

The Interactions we're planning to build will showcase two animations at the same time, on the same elements: one looping, idle animation that will rotate each of the metaballs, and another animation that will make them move from place to place in the page, changing size, depending on some triggers.

We can't put several interactions on the same elements, so we'll nest each metaball in a div that we will use as an animation controller. We will put the idle rotation on the balls, and the move + resize on the new outer controller.

Additionally, we will make the dimensions of the outer controller relative to the viewport width, using the vw unit. We'll set the balls to grow as much as their parent allow them to. Hopefully, everything will resize proportionally to the viewport and the animation will look good on every screen size.

Also, we won't use divs for the balls, but rather SVG shapes, to start of with a more interesting and organic design.

Shapes are designed in Illustrator, with a bright purple color, that we identified before will blend nicely with our blue gradient background.

Here is the updated structure (it shows 2 balls but we'll have 5 in total). The controller divs will get a unique class each, soit's easy to identify them during the Interaction work later.

Blending with the page background

In order to get rid of the background, we can use a CSS blending property, the mix-blend-mode one. Using this property, we can chose between the popular image blending modes. In our case, the multiply blending mode will do just fine.

Webflow's UI doesn't yet support mix-blend-mode or background-blend-mode, but it's easy to add as CSS custom code, and the effects can be visible live, right in the designer, providing that you're using the Custom Code component to add you SVG code.

.mbm-multiply {mix-blend-mode: multiply;}

Once the code added, what's left to do is to apply the class .mbm-multiply to a parent element of our scene, or in other word, to a parent element of the element with the white blackground. So let's wrap out scene in another level of div that will receive the blending mode. (the class can be added as a reference or a combo class.)

Animating depending on scroll using Interactions 2.0

The background animation of this page is using a While the page is scrolling trigger.

The principle is simple: start by defining a series of keyframes for size and position, then place them on the timeline when the first animation needs to start. Duplicate them, place them further away on the timeline, and set different values for them. The animation will happen between those two groups of keyframes.

To add a pause, or a gap, between two sets of animations, duplicate the last group of keyframes and place it at the end of the desired pause and leave their values untouched. There will then be no animations between them and the previous group of keyframes.

First, we define position and size and place those keyframes at 20% (down the page), when we want our first animation to start.

20%

⃞ ball-anim-controller-1

Move

⃞ ball-anim-controller-1

Size

Then we put the target keyframes at 25%. So our animation will happen between 25 and 30% when scrolling own the page.

25%

⃞ ball-anim-controller-1

Move

⃞ ball-anim-controller-1

Size

The keyframes we place at 45% are the exact same than the ones at 25%. So there is no animation at all between 25 and 45% when scrolling down the page.

45%

⃞ ball-anim-controller-1

Move

⃞ ball-anim-controller-1

Size

At 50%, we put target keyframes again, with modify values for Move and Size, so a second animation plays between 45 and 50% scrolling down the page.

50%

⃞ ball-anim-controller-1

Move

⃞ ball-anim-controller-1

Size

Fine-tuning Metaballs

Sharpness and viscosity can be defined by changing the blur and contrast values.

To get smoother metaballs, we can lower the Contrast value from 8000 to 4000. We lose a bit of the sharpness we previously had.

Hover over the frame and move horizontally

Move your phone or tablet from left to right

Viscosity: metaballs elasticity

We've seen that the principle of metaballs is that the Contrast filter is shrinking the blurred ball into a sharper ball. The bigger the blur value is, the bigger the contrast value has to be, to get a sharp shape.

But by increasing the blur value, we also increase the area where two metaballs starts to be attracted one by another. Let's test different viscosity values.

The viscosity of our previous tests, and the one of the shapes in the page background, is set by our filter values:

{filter: contrast(8000%);}
{filter: blur(40px)}

Hover over the frame and move horizontally

Move your phone or tablet from left to right

Let's try to lower those values to get a less elastic effect. As you can see below, there's less attraction between the two shapes.

{filter: contrast(1200%);}
{filter: blur(20px)}

Hover over the frame and move horizontally

Move your phone or tablet from left to right

By lowering the blur value again, the shapes now have to be really close to interact one with another.

{filter: contrast(1200%);}
{filter: blur(10px)}

Hover over the frame and move horizontally

Move your phone or tablet from left to right

Let's do the opposite and bump those values again. At that size, the maximu we can do is 9000 and 64. Higher than that and the results are very angular and irregular. You'll notice that the higher the blur value is, the smaller the shape can be.

{filter: contrast(9000%);}
{filter: blur(64px)}

Hover over the frame and move horizontally

Move your phone or tablet from left to right

More experiments with colors and blending modes to come, also more practical examples of what are the different use cases for metaballs.

In the meantime, see you on Twitter or on the blog.