component
SVG Mask Scroll
By Bhavin Hirpara
Details
- Bhavin HirparaAuthor
- componentType
- $10.00Price
- 2026-06-30Published
- 2026-08-21Updated
- 2026-06-30Added
- CarouselsCategories
Summary
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.
Description
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: Drag the SVG Mask Scroll component onto your page. Select the component and open the Slides property. Add, remove, or reorder slides. Edit each slide's image, title, subtitle, and content. Customize colors, typography, spacing, overlay width, and animation from the property panel.
Introduction
Smooth SVG Scroll Animation
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #3779