Curtain Loader: Custom Framer Component for Page Transitions
Shreyansh Shrivastava
Curtain Loader — Custom Framer Component
A production-ready Framer Code Component for cinematic page transitions, built with deep customization, accessibility, and a motion-safe reveal architecture.
Role: Product Designer, Framer Developer
Scope: Interaction Design, Motion Design, Framer Code Component, Custom Component Development, Accessibility
Tools: Framer, React, TypeScript, CSS
Project type: Custom Framer Component
01 — THE INTRODUCTION
A page transition shouldn't just look good. It should work with the site.
Curtain Loader started as a visual experiment: recreate the feeling of a physical curtain opening into a website.
The challenge was turning that idea into something designers could actually reuse inside Framer.
Instead of building a single animation, I built a configurable Code Component where the motion, direction, visual treatment, branding, playback behavior, and reveal effect can all be controlled directly from Framer's Property Panel.
The result is a reusable interaction system rather than a one-off animation.
02 — THE PROBLEM
The animation was the easy part.
A convincing curtain transition needs more than two panels moving apart.
It needs to account for:
Different opening directions
Multiple motion styles
Timing and sequencing
Visual depth
Branding
Skip behavior
Repeat behavior
Reduced-motion preferences
Keyboard interaction
The site's existing animations
The real challenge was making all of those variables configurable without making the component difficult to use.
03 — FEATURE VISUAL
A complex interaction system condensed into familiar Framer Property Controls.
04 — CONFIGURATION
One component. Multiple personalities.
Curtain Loader exposes the animation system directly through Framer's native controls.
Direction
Horizontal — opens from the center
Vertical — opens from top and bottom
Wipe — reveals the page with a single panel
Motion
Simultaneous — both panels move together
Offset — one panel follows the other
Easing
Water
Cinematic
Snap
Duration, hold delay, and offset timing can also be adjusted without editing the component's source code.
05 — VARIATIONS VISUAL
Horizontal / Cinematic
Vertical / Water
Wipe / Snap
06 — The Engineering Challenge
The visual was simple. The integration wasn't.
The challenge wasn't just making the curtains move.
Curtain Loader needed to work as a reusable Framer component without interfering with the site's existing animations, transforms, scroll effects, or layout behavior.
I also wanted the experience to remain configurable from Framer's Property Panel rather than requiring users to edit the component itself.
07 — THE SOLUTION
Built as a self-contained interaction system.
In v2.4, the reveal effect was rebuilt around an independent fullscreen overlay managed by the component itself.
The loader doesn't modify the site's own transform, filter, or opacity, and requires no custom CSS or wrapper attributes.
Playback controls, reduced-motion support, keyboard-accessible skip behavior, inert content handling, scoped playback IDs, and an
On Reveal Complete event are also built into the component.The result is a configurable interaction that can be dropped into a Framer project and adapted without touching the underlying site.
08 — Need a custom interaction in Framer?
I design and develop custom Framer Code Components for interactions that go beyond standard Framer layers.
From advanced animations and transitions to custom UI systems, I can turn an interaction idea into a reusable, production-ready component.
Like this project
Posted Sep 21, 2026
Developed a configurable Framer code component for cinematic page transitions.
Likes
0
Views
1
