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

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Jul 23 - Read on Facebook

mix-blend-mode

Pretty neat discovery / effect based on a question by Claudio Guglieri Lillo using multiply blending mode and a goey effect.

http://share.framerjs.com/tfje5tl2k1lq/

I completely forgot about this because support wasn't amazing when it first landed and I definitely need to do some more testing... but it's pretty neat if you could use this to prototype some ideas.

Read more about it here on MDN: http://jrdn.io/c0fd & http://jrdn.io/c0zL

14 Comments

Jordan Robert Dobson

Here's a video if the effect isn't working for you: http://jrdn.io/c15M

Stephen Crowley

haha, nice!

Jason Ogle

Sweet!

Command Wu

great

Michał Jarosz

Blending modes cool, but how blur working here!

Vladimir Shlygin

amazing how you did this trick with contrast. very smart!

Andreas Wahlström

Michał Jarosz the contrast on the super layer (container) sharpens the blur which results in this gooey effect :)

Svet Denkov
Stephen Crowley

What if you combined your "random hearts" generator w/ this, would it look like a lava lamp? That'd be pretty cool

Jordan Robert Dobson

Pretty much Stephen Crowley... check this out: http://jrdn.io/c0wK

Svet Denkov

Jordan Robert Dobson, I trtied the share link and interesting works for me only on Safari. Does this organic shape approach work only "vector" based shapes (e.g., layers built in FJS)? I wonder if this will work on imported images as well!

Jordan Robert Dobson

It should Svet.

Antonio Krämer Fernandez

thanks for sharing! I'm having a lot of fun over here ;) http://share.framerjs.com/fx34w4u4vqlo/ . @Svet for me it's also just working in Safari and Framer properley…

Svet Denkov

Here is a pretty decent write up on the CSS and SVG underlying methods: https://css-tricks.com/gooey-effect/

Read the entire post on Facebook