Create stunning scroll-driven storytelling with smooth SVG mask transitions. This component combines a sticky content panel with animated image reveals, making it perfect for portfolios, agency websites, product showcases, case studies, and landing pages.

Simply add your slides, customize the text, colors, spacing, and typography, and your scroll animation is ready—no coding required.

Features

• Smooth scroll-based SVG mask animations

• Add unlimited slides with images and content

• Fully customizable colors and typography

• Adjustable overlay width and text width

• Optional mask animation toggle

• Responsive and optimized for all screen sizes

• Easy to use with intuitive property controls

• Built entirely in Framer

Perfect for designers, freelancers, creative agencies, SaaS websites, and anyone looking to create an engaging scrolling experience in minutes.

How to Customize

Getting started is simple:

1. Drag the SVG Mask Scroll component onto your page.

2. Select the component and open the Slides property.

3. Add, remove, or reorder slides.

4. Edit each slide's image, title, subtitle, and content.

5. Customize colors, typography, spacing, overlay width, and animation from the property panel.