Asset Library / framer component
Crazy Hover Mask Reveal
A creative, GSAP-free hover mask component for Framer. Instantly add a dynamic image reveal effect to any element.
Framer component
Open in Framer →This is a native Framer component that creates a sophisticated mask reveal animation on hover. The effect uses a custom mask that animates open, revealing the underlying content with a fluid, organic motion. It is designed for immediate use without external libraries like GSAP.
Apply this component to images, text blocks, or cards when you need a memorable, interactive hover state. It is particularly effective for portfolio pieces, creative agency sites, and product showcases where standard fades are insufficient.
The component is built for Framer designers and developers who want advanced visual effects without managing complex code dependencies. It saves significant setup time compared to manually scripting mask animations.
What sets it apart is its pure Framer implementation. There is no GSAP, Lenis, or external script to configure. The animation logic is self-contained, making it robust, easy to customize, and fully compatible with Framer's design and code panel workflows.
Usage:
• Drag the component from the Assets panel onto your canvas.
• Connect your target element (image, div, etc.) to the component's 'Target' prop.
• Adjust the 'Mask Shape' and 'Animation Curve' props to control the reveal style and speed.
• Use the 'Hover Scale' prop to add a subtle zoom effect to the mask for extra dynamism.
Related resources
3D Rotating Product Showcase
A high-performance, no-code 3D rotating showcase component for Framer. Built for modern, award-winning websites.
Glass Breaking Component for Framer
Add realistic glass shattering effects to your Framer projects. Fully customizable, no coding required. Just import and adjust parameters in the right panel.
Framer Parallax Scroll Component
A ready-to-use Framer component creating depth through layered scroll transforms. No complex setup—just drop in and adjust.
