“Blinds Image Mask”
Stunning scroll-triggered image reveal with the blinds-like effect. This customizable animation effect splits image into animated blinds that reveal on scroll, perfect for hero sections and galleries.
Component Details
Instructions
Copy and paste the component into your Framer project, then adjust the property controls in the right panel to customize and configure it for your website.
About
A stunning and highly customizable image reveal component that creates an engaging blinds-like animation effect. Perfect for hero sections, image galleries, or any scroll-triggered reveals that need that extra wow factor in your Framer projects.
✨ Key Features
- Scroll-Triggered Animation: Smooth reveal animations that respond to scroll position
- Flexible Direction: Choose from 4 animation directions (top, bottom, left, right)
- Customizable Blinds: Control the number and simultaneous animations of blinds
- Multiple Image Sources: Use uploaded images or external URLs
- Advanced Spring Physics: Fine-tune animation feel with spring physics controls
- Smart Intersection Points: Precise control over when animations trigger
- Debug Mode: Visual helpers for perfect animation timing
- Responsive Design: Adapts seamlessly to any container size
💡 Pro Tips
- Start with 25 blinds and 15 simultaneous animations for a balanced effect
- Use the debug mode to visualize and perfect your scroll trigger points
- For full-width images, try intersection points of
1,1,1,0.7
- For smaller images, start with
0,1,0,0.5
intersection points - Adjust the blindHeightAdjustment if you notice tiny gaps between blinds
- Use gradient mode for more sophisticated visual effects
- Choose 'cover' object-fit mode for most consistent results
🎨 Styling Options
- Image Display: Multiple object-fit modes (cover, contain, fill, scale-down)
- Blinds Style: Solid colors or custom CSS gradients
- Animation Physics: Stiffness, damping, and mass controls
- Initial State: Choose between open or closed blinds
- Animation Direction: Four-way directional control
- Scroll Triggers: Precise intersection point controls
This component brings cinematic reveal effects to your Framer projects without requiring any coding knowledge, while maintaining full control over the animation timing, style, and behavior. Perfect for creating engaging scroll experiences that capture user attention.




Need a custom Framer component that goes beyond what's possible on the canvas? We'll create the custom code solution for you! Sky is the limit. Request a custom component here.
You may also like...
“Frequently” Asked Questions
Get answers to common questions about the Bachoff custom code Framer components.
“What are custom code Framer components?”
Custom code components are advanced elements built for Framer that enhance its default capabilities, allowing designers to implement features like 3D mockups, generators, and dynamic charts.
“Do I need coding knowledge to use custom code components?”
No coding knowledge is required! Our components are designed to be plug-and-play, but they also allow for further customization if you have coding skills.
“What types of components do you offer?”
We offer a variety of components, including 3D laptop mockups, PFP and MEME generators, charts (line, bar, pie, donut), sliders, calculators, and UI elements like cards and compare cards.
“How do I install a custom code component in Framer?”
Installation is straightforward! Usually it's just a matter of copying and pasting the code into your Framer project. You'll receive step-by-step instructions with each component, including how to integrate it into your Framer project.
“Are the components compatible with all Framer projects?”
Yes, our components are fully compatible with any Framer project. If you face any compatibility issues, our team is here to help.
“What's the difference between free, pro, and elite components?”
Free components offer basic functionality, while pro and elite components include more advanced features and customization options, catering to professional and enterprise-level needs.
“Can I request a custom-built component?”
Absolutely! We specialize in creating custom solutions tailored to your specific needs. Contact us for a quote and delivery timeline.
“Sign up” for the newsletter_
Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.
“Contact”
“Policies”
©2025 BACHOFF Studio
All Rights Reserved