Shutter Transition
Page transition that mimics a window shutter to reveal website content. Fully customizable and responsive. Perfect for page transitions, content reveals, and pre-loaders.
Make it with Workshop
Build your own component with AI
About this Component
A page transition component that mimics a shutter effect to reveal the content underneath. The reveal shows a solid color of your choice before revealing the website underneath. The shutter transition lasts 0.2s, and works well paired with the "Fade In" page transition built in Framer. This shutter animation is perfect for website page transitions or content reveals.
Features:
Responsive shutter animation that spans the full page width
Quick 0.2s transition, which doesn't distract users from main content
Smooth page transition with easy ease
Customizable colors and background fade allows you to personalize the transition NOTE: Keep "BG Fade" color set to 0% opacity in order to allow the content to still be seen after the animation.
Perfect for pre-loaders, content reveals, or page transitions
PLEASE NOTE: Make sure to give the component “Pointer: None” under "Styles" so the website content underneath works properly.
