---
title: "SVG Mask Scroll — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Bhavin Hirpara · Carousels. SVG Mask Scroll is a smooth scroll-driven Framer component for creating interactive image sliders, SVG mask reveals, and modern…"
canonical: "https://framer.elliotli.dev/component/svg-mask-scroll"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/SVG Mask Scroll

# SVG Mask Scroll

Smooth SVG Scroll Animation

[View on Framer](https://framer.com/marketplace/components/svg-mask-scroll/?via=elliot-li)

![SVG Mask Scroll preview image 1](https://framer.elliotli.dev/og/component/svg-mask-scroll/cde901131d41779b/1600x1003.jpg)

## 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:

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3421

## Details

- **Author**: Bhavin Hirpara
- **Price**: $10.00
- **Published**: 2026-06-30
- **Updated**: 2026-08-21
- **Added**: 2026-06-30
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow