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

What is Framer? Join the Community
Return to index
Cyrus Cheng
Posted Mar 03 - Read on Facebook

Hi everybody!I'm working on a project and facing some problems. Does anybody know how to blend two shapes with framer , like two circles mix together?

14 Comments

Zoltan Ray

Intriguing question. At first glance that kind of meta ball effect seems beyond the capabilities of Framer. A quick search led me to this: http://www.somethinghitme.com/2012/06/06/2d-metaballs-with-canvas/

Andreas Mitschke

You can simulate something like that with some really advanced SVG filters.

Like in this pen: http://codepen.io/lbebber/pen/RNgBPP

Joshua Tucker

You're in luck! Someone on Twitter recently shared this article that answers what you're looking to do.

http://rohn.ghost.io/gooey-framerjs/

Jordan Robert Dobson

You can combine blur with contrast on the parent element to get something similar. The contrast will mess with the color though so you might need to adjust with color filters.

Andreas Mitschke

Joshua Tucker wait, it basically is just a sharpened blur filter ? That's it ? Wow, I thought it's more complicated than that.

Joshua Tucker

Andreas Mitschke I didn't realize how easy this was until I read this as well.

Andreas Mitschke

Joshua Tucker as I was reading the article it just came to my mind that there is an old technique for Photoshop to get rounded corners in the same way (gaussian -> channel contrast). Used it in PS7 quite often actually.

However, using blurring filters and then recalculating it to flat surfaces again is very resource heavy. Let's see :D

Joshua Tucker

Andreas Mitschke Nice! Hit us up back here if you run into anything exciting :).

Shane Brown

Depending on how you are planning to use the effect, you could do it in After Effects or the like and trigger it as a video as well, if it causes too many issues.

Cyrus Cheng

Dose anyway to make two ball being longer when u drag one of them?

Jordan Robert Dobson

You can use an sag sprite and hack it in.

Ola Laurin

http://paperjs.org/examples/meta-balls/

Here's another alternative with Paper JS.

Cyrus Cheng

Jordan Robert Dobson,Have any information about “sag sprite..?”

Jordan Robert Dobson

SVG sprite. Sorry.

Read the entire post on Facebook