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?
I have a proof of concept of this on my computer. Will post in a bit. It's in black and white though.
that linked thing is done in Adobe AfterEffects
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?
Here you go: http://share.framerjs.com/99qbp1esm8xx/You can drag and drop the blobs to achieve the effect
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
Andreas Wahlström you're da man! did you just apply fuckin blur+contrast? :D dead simple
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/
cool. btw not working in Chrome – I guess Framer doesn't apply -webkit- prefix somewhere when translating the filters, right?
Most places, this effect is called "metaballs", you can probably find an algorithm for recreating it in JS
Adam Laskowitz thanks! This looks like a pretty interesting approach: http://codepen.io/keithclark/pen/sEbFz
There it is :) GL!
OK so now we need to figure out the color blending guys ;-)
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.