Framer Update, Animations

Framer Update: Masking

Benjamin

9:20

35K views

Apr 25, 2024

About this lesson

The April Update brings Masking to Framer. Add masks to your layers with a single click, then customize using gradients and images. Stack multiple masks on top of one another to unlock new creative layouts. Framer supports alpha masking, luminance masking, and compositing with multiple masks. The possibilities are endless, and you can add masks to any type of layer, like images, videos, components, and more. For everything else that’s new, see our changelog here: https://framer.com/updates/april-update-2024

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:04[Music]0:27oh 0:30[Music]0:36yo my name is Benjamin and in this video 0:40I'm excited to introduce masking a new 0:44feature we're adding to the April update 0:47let's dive right into it here we have an 0:51image and I'd like some parts of this 0:53image to be faded out gradually 0:56sometimes you can use gradients for this 0:59but that won't work with themes or 1:01different backgrounds in general to add 1:04a mask I can head over to the Styles 1:06property here and select mask this will 1:10default to an alpha mask using gradients 1:15where you can use any of our gradient 1:17tools to Define custom masks I can also 1:21edit these masks directly on the canvas 1:25we can rotate it to change the angle and 1:28we can edit and add new gradient stops 1:32and for each gradient stop you can 1:34control the alpha value when set to zero 1:37that part of your content will be 1:39completely invisible and when set to 100 1:43that part will be completely visible so 1:46I'll bring in this top as well and then 1:49I'll add two more and for these inner 1:51ones I'd like to set Alpha to 1:55100% And for the outer ones 0%2:01and now we can tweak the positioning of 2:04each stop to correctly mask just the 2:08parts I would like to mask of this image 2:11so you get complete control over your 2:14mask and best of all we're still dealing 2:16with a single layer once done you can 2:19edit this layer as you normally would 2:23and we're using an image here but it 2:25could even be a video or a component as 2:28well those are the very basics of alpha 2:31masking in framer and you can use this 2:33for more creative use cases like 2:36recreating a progressive blur effect 2:40which here I did by stacking multiple 2:42layers with an increasing background 2:44blur and each layer revealing a 2:47different part of the gradient so if we 2:50open one of these you can see they're 2:52just Alpha masks like the ones we looked 2:55at before and by combining features like 2:58these you can create pretty cool 3:01customizable 3:06[Music]3:07setups here I connected each of these 3:10blurs to a visibility variable so we can 3:14toggle the before and after on the 3:19instance next let's have a look at image 3:23masking instead of just using gradients 3:26you can also upload your own images to 3:29be used as masks for example you can 3:32upload your own svgs and use them to 3:36mask any layer in framer and you can 3:39also customize the sizing and 3:41positioning of your uploaded image here 3:45I just added a few variants each with 3:48their own SVG mask and then cycled 3:51between each variant while using svgs 3:56with Alpha masking is probably most 3:58common we also added some more modern 4:02properties like luminance masking where 4:06you can upload other bngs or even gifs 4:10to use as the mask of any layer in 4:14framer so here I uploaded this animated 4:18gif and set mode to luminance which 4:21looks at the relative luminance values 4:24of your uploaded image in this case all 4:27the light parts are visible 4:30and the dark parts are hidden at the 4:33time of recording animated gifts don't 4:36work well as masks in Safari so please 4:40use this with 4:42[Music]4:43caution next let's have a look at radial 4:46gradient masking to solve a common UI 4:50pattern this is a stack of images and we 4:54would like to separate these images 4:56using a sort of Border without using 4:59using real borders as that wouldn't work 5:02on any given background so I'll add a 5:05mask set it to radial move this color 5:09stop to the 5:11right move the gradient to the center 5:15and by holding shift scale it up just a 5:18little 5:19bit I'll snap it to 5:220.54 then I'll copy this mask and paste 5:26it onto the next image 5:31and just like that we have a stack of 5:34user images that work well on any given 5:38background we also added support for 5:41stacking multiple masks on top of one 5:44another so here I have two masks and 5:48it's just a simple SVG Circle this one 5:52is positioned at the bottom center and 5:55this one at the top Center by default 5:59these are additive so these two circles 6:02get combined into a new shape when you 6:06stack multiple masks we allow you to 6:09control a property called composite with 6:12four options add subtract intersect and 6:18exclude and this influences how this 6:22mask renders in relation to the mask 6:25layer below it so you can create all 6:28sorts of unique effect effect if you've 6:30ever used a design tool to edit multiple 6:34shapes this is essentially the same as 6:37Boolean operations but then for masks 6:40and you can even sort your masks to 6:43quickly iterate between different setups 6:46this property only works when there is a 6:49mask directly below it but you can still 6:52freely sort and will remember the value 6:55you defined even for the last mask 6:58unlike boot operations when editing 7:01Vector shapes these masks can be applied 7:04to responsive elements unlocking all 7:07sorts of creative and unique setups so 7:10next let's have a look at a more 7:13realistic example of how you can 7:15incorporate multiple masks in a 7:18responsive 7:19setting here I've made a simple 7:22responsive ticket by stacking multiple 7:25masks and using the composite property 7:29on the right right here we have two SVG 7:31image masks with the topmost one set to 7:35intersect and we've also added a little 7:38border radius and on the left here we're 7:41mixing two image masks as well but I've 7:44added a gradient mask in between to make 7:48sure you can resize freely without ever 7:50seeing the edges of the image 7:53masks next I'd like to point out that 7:56these new properties also work within 7:59component variants allowing for some 8:02pretty fun new 8:04interactions like this setup where 8:07creating a mask that is taller than the 8:09actual Avatar allows you to create 8:12playful clipping 8:14[Music]8:18effects and last but not least the new 8:21masking property also works on 8:24components like the ticker component 8:27that here I've connected to two images 8:30of generated noise and we also support 8:33tiling for any image mask allowing you 8:36to design patterns and background images 8:40using masks as well and just like normal 8:43patterns in framer we can customize the 8:46skill I'll go for 8:4975% and if we then go back and give this 8:52a 8:53preview you can see we've created this 8:57animated. crit effect using only a 9:00single ticker 9:02component and that's pretty much it for 9:05this video thank you so much for 9:07watching and as always stay tuned for 9:10more updates coming soon

Also coversComponent Variants Components Responsive Design Sizing Stacks Themes Transitions & Easing Variables

Watch on YouTube ↗

‹ Framer Update: Contra Component

Framer Update: Canvas and Preview Improvements ›