ImgMask

Details Transform your text into an interactive visual experience with animated image reveals that respond to both hover interactions and scroll-based triggers.

Details Transform your text into an interactive visual experience with animated image reveals that respond to both hover interactions and scroll-based triggers. This versatile component allows you to blend typography with imagery by replacing designated characters in your text with animated images that smoothly reveal themselves either when users hover over the component or as they scroll it into view. Simply use a custom character (like ~) as a placeholder within your text, and watch as images mask into view based on your chosen trigger method. The reveal animation can be customized to expand horizontally or vertically, creating everything from subtle accents to bold visual statements that captivate your audience. Perfect for creative headlines, interactive portfolios, scroll-triggered storytelling, and memorable call-to-action elements. Features Dual trigger modes: hover interaction or scroll-based animation Dynamic text-to-image animation with customizable timing Customizable mask character for flexible text integration Smooth reveal animations with horizontal or vertical directions Adjustable scroll threshold for precise trigger control Optional click-through linking functionality Responsive image sizing that scales with font size Full typography control with custom fonts and styling Multiple alignment options for versatile layouts Optimized performance with smooth animations Controls: How to Use Trigger Type – Choose between hover activation or scroll-triggered animation Scroll Threshold – Set what percentage of the element must be visible to trigger scroll animation Text – Enter your text content with mask characters as image placeholders (e.g., "Hello ~ World") Mask Character – Define which character will be replaced with animated images Font – Complete typography control, including size, family, weight, and spacing Text Color – Choose the color for your text content Text Alignment – Align text left, center, or right within the container Mask Image – Upload the image that will animate into view Reveal Direction – Set whether images reveal horizontally or vertically Animation Duration – Control how long the reveal animation takes (0.1-5 seconds) Animation Easing – Choose from 11 different easing options for motion style Link URL – Optional URL to make the entire component clickable Refund Policy As a digital product, all purchases are final and non-refundable. Upon purchase, you receive immediate access to the Framer component, and since digital products cannot be returned once delivered, we cannot process refunds, exchanges, or cancellations. I encourage you to carefully review all features, documentation, and preview materials before purchasing. If you have any questions or need clarification about the component's functionality, please don't hesitate to reach out before your purchase. Your purchase confirms acceptance of these terms and conditions.Credits - Hover SVG provided by streamlineicons.com.