SVG Mask Scroll

SVG Mask Scroll is a smooth scroll-driven Framer component for creating interactive image sliders, SVG mask reveals, and modern scroll animations without writing code.

Create engaging storytelling sections where images transition and reveal as users scroll. The sticky scroll layout keeps your content in focus while each slide smoothly transitions into the next using an animated SVG mask effect.

Features

• Scroll-driven SVG mask animation

• Smooth image reveal and slide transitions

• Sticky scroll interaction

• Add multiple slides with custom images and content

• Fully customizable text, colors, fonts, and spacing

• Adjustable overlay and text width

• Custom progress line and animation settings

• Toggle the SVG mask animation on or off

• Responsive layout for desktop, tablet, and mobile

• Easy Framer property controls

• No coding required

Perfect For

Use SVG Mask Scroll for creative agency websites, portfolio websites, designer portfolios, case studies, product showcases, SaaS websites, landing pages, storytelling sections, photography websites, and modern interactive websites.

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.