Does anyone know how to create a "steam-effect" layer you can swipe progressively to uncover an image ?

(similar to the example below)

4 Comments

Ola Laurin

I did it aeons ago in Flash but I guess I'd still go about and do it this way today. Get two images, one with the regular image and one with a blur effect. Create three layers on top of eachother. Put the blurred one in the bottom of that pile and the regular one in the middle. The third layer should mask the middle/regular layer. To that top layer you create a drawing effect so that the more you "draw" the more of the regular image is shown.

Stan Dézaid

You mean using the same technique as Marc to get the text transparent in this example, but replacing the text by a drawing feature ? (I just tried, can't make it work..)http://share.framerjs.com/6dlaso2upwjq/

Andrew Nalband

Stan Dézaid, I wanted to take this a little farther, but this was as far as I could get tonight. You can't interact with it, but it does have a blurred layer and the same image with a mask around it. http://share.framerjs.com/poxqqujp4nr6/

Johannes Eckert

You can do this with <canvas>, which sounds harder than it is—and it's practically done how Ola Laurin did it in flash:

1) Two images ontop of each other, one clear and one blurry one (I used unsplash.it to request the the image twice, with blur effect)2) One image placed in a regular framer layer3) the blurry image gets rendered into a <canvas> (line 40, canvas.context.drawImage)4) Draw thick brushes onto the canvas (context.moveTo, lineTo and stroke())5) the only tricky part is knowing where to draw, but the new gesture events for onPan tell you exactly where your pointer is (you just get touch events a bit differently on a phone)6) The magic is: the drawing is made in any color and then a composition mode is set that cuts out everything you draw on. Comment line 79 to see the actual drawing that acts as the mask.

This allows you do draw with different brushes, custom strokes and even a smudgy, soft brush (using shadows)