Component
Frame Reveal Effect in Framer
This is a Framer component that lets you recreate the frame reveal effect originally seen on the “On-Page Editing” release’s Framer event (Summer 2025). Feel free to copy the component or remix the project to see how it’s used for creating these effects without any code. Fun stuff, trust me.
Created by
About the resource
This component works in a really simple and straightforward way to make creating this frame reveal effect as easy as possible.
Just drag and drop the component onto your page, and customize the usual fill, border, radius, and shadow properties on the right panel to define how the frame is displayed on the page.
About the resource
This component works in a really simple and straightforward way to make creating this frame reveal effect as easy as possible.
Just drag and drop the component onto your page, and customize the usual fill, border, radius, and shadow properties on the right panel to define how the frame is displayed on the page.
About the resource
This component works in a really simple and straightforward way to make creating this frame reveal effect as easy as possible.
Just drag and drop the component onto your page, and customize the usual fill, border, radius, and shadow properties on the right panel to define how the frame is displayed on the page.
Component properties of the Frame Reveal component.
Component properties of the Frame Reveal component.
Component properties of the Frame Reveal component.
By setting the Base property, you define how the frame appears on the screen by default. 0 means completely hidden (0%). If you set this to 1, it will display as 100% opacity by default.
The Hover defines the transparency level we’ll see when hovering over to reveal parts of the frame.
Range is of course the size of our hover area.
Keep in mind: on the canvas, you’re not going to see the component if the “Base” is set to 0. Don’t let this confuse you, since the component will still appear and reveal with the “Hover” opacity when hovering around it.
By setting the Base property, you define how the frame appears on the screen by default. 0 means completely hidden (0%). If you set this to 1, it will display as 100% opacity by default.
The Hover defines the transparency level we’ll see when hovering over to reveal parts of the frame.
Range is of course the size of our hover area.
Keep in mind: on the canvas, you’re not going to see the component if the “Base” is set to 0. Don’t let this confuse you, since the component will still appear and reveal with the “Hover” opacity when hovering around it.
By setting the Base property, you define how the frame appears on the screen by default. 0 means completely hidden (0%). If you set this to 1, it will display as 100% opacity by default.
The Hover defines the transparency level we’ll see when hovering over to reveal parts of the frame.
Range is of course the size of our hover area.
Keep in mind: on the canvas, you’re not going to see the component if the “Base” is set to 0. Don’t let this confuse you, since the component will still appear and reveal with the “Hover” opacity when hovering around it.
