This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Josef Richter
Posted May 17 - Read on Facebook

Any ideas how to do this "lava lamp" effect in Framer? :-) In AfterEffects it's done by applying Blur + adjusting Levels of Alpha channel. It's very simple actually. But still, might be beyond browsers' capabilities... Any ideas?

13 Comments

Andreas Wahlström

I have a proof of concept of this on my computer. Will post in a bit. It's in black and white though.

Josef Richter

that linked thing is done in Adobe AfterEffects

Jakub Heglas

What type of blur? If its just blur + colors, shouldnt be super complicated to recreate in webkit. Can i see the tutorial for how its done in AE?

Andreas Wahlström

Here you go: http://share.framerjs.com/99qbp1esm8xx/
You can drag and drop the blobs to achieve the effect

Josef Richter

1. gaussian blur and 2. adjust levels on *alpha* channel - to put it simple, just moving all triangles to the same point, i.e. alpha input black = alpha input white. Here's the AE file: http://cl.ly/421M2e1m3X3W

Josef Richter

Andreas Wahlström you're da man! did you just apply fuckin blur+contrast? :D dead simple

Andreas Wahlström

yep! you have to play around with the values to get it feeling right. see this article for an in-depth walkthrough: https://css-tricks.com/shape-blobbing-css/

Josef Richter

cool. btw not working in Chrome – I guess Framer doesn't apply -webkit- prefix somewhere when translating the filters, right?

Adam Laskowitz

Most places, this effect is called "metaballs", you can probably find an algorithm for recreating it in JS

Andreas Wahlström

Adam Laskowitz thanks! This looks like a pretty interesting approach: http://codepen.io/keithclark/pen/sEbFz

Adam Laskowitz

There it is :) GL!

Josef Richter

OK so now we need to figure out the color blending guys ;-)

Andreas Mitschke

It's not recommended to use CSS filter as of now anyways as long as you can't ensure your target audience to feature high performance smartphones or featuring only up2date browsers.

Read the entire post on Facebook