Animation
Unmask Sections On Scroll in Framer
This is a fun unmask sections on scroll in Framer, inspired by a Timothy Ricks YouTube video, where sections reveal themselves layer by layer as you scroll, feel free to remix it and explore the setup.
About the resource
To create this, I structured everything inside a main frame and stacked multiple section layers below it, mixing relative and sticky positioning. The first few sections sit inside a wrapper where one section is set to sticky and acts as the unmask layer, while the section below it remains relative. I used z-index values to control how sections hide and reveal on scroll, so higher sections appear masked until the scroll naturally exposes them.
As the page progresses, I repeated this pattern by wrapping specific sections in their own frames and setting them to sticky with lower z-index values. This makes each new section feel like it’s hidden underneath the previous one and slowly revealed as you scroll. Toward the end, the final wrapper holds the last sections, with the footer set to sticky as well, creating one last unmasking moment. The entire effect is achieved through layout structure, sticky positioning, and z-index layering, no complex animations needed.
About the resource
To create this, I structured everything inside a main frame and stacked multiple section layers below it, mixing relative and sticky positioning. The first few sections sit inside a wrapper where one section is set to sticky and acts as the unmask layer, while the section below it remains relative. I used z-index values to control how sections hide and reveal on scroll, so higher sections appear masked until the scroll naturally exposes them.
As the page progresses, I repeated this pattern by wrapping specific sections in their own frames and setting them to sticky with lower z-index values. This makes each new section feel like it’s hidden underneath the previous one and slowly revealed as you scroll. Toward the end, the final wrapper holds the last sections, with the footer set to sticky as well, creating one last unmasking moment. The entire effect is achieved through layout structure, sticky positioning, and z-index layering, no complex animations needed.
About the resource
To create this, I structured everything inside a main frame and stacked multiple section layers below it, mixing relative and sticky positioning. The first few sections sit inside a wrapper where one section is set to sticky and acts as the unmask layer, while the section below it remains relative. I used z-index values to control how sections hide and reveal on scroll, so higher sections appear masked until the scroll naturally exposes them.
As the page progresses, I repeated this pattern by wrapping specific sections in their own frames and setting them to sticky with lower z-index values. This makes each new section feel like it’s hidden underneath the previous one and slowly revealed as you scroll. Toward the end, the final wrapper holds the last sections, with the footer set to sticky as well, creating one last unmasking moment. The entire effect is achieved through layout structure, sticky positioning, and z-index layering, no complex animations needed.
The layout structure behind the unmask sections on scroll in Framer.
The layout structure behind the unmask sections on scroll in Framer.
The layout structure behind the unmask sections on scroll in Framer.
