---
title: "SVG Flow Scroll v2 — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Hasan Wali · Effects. Scroll-driven SVG stroke wipe"
canonical: "https://framer.elliotli.dev/component/svg-flow-scroll-v2"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/SVG Flow Scroll v2

# SVG Flow Scroll v2

Scroll-driven SVG stroke wipe

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

![SVG Flow Scroll v2 preview image 1](https://framer.elliotli.dev/og/component/svg-flow-scroll-v2/2c9697789f358c20/1600x1200.jpg)

## Summary

Scroll-driven SVG stroke wipe

## Description

**About this Component**

Haytham SVG Strokes is a responsive scroll-driven SVG animation that draws a layered set of sweeping strokes across the frame, optionally holds the covered state, then erases them as scrolling continues. Use it as a bold section transition, portfolio moment, hero overlay, or full-frame visual effect.

**Perfect For:** • Creative portfolios and agency sites • Hero and section transitions • Editorial and campaign pages • Scroll-led storytelling • Experimental landing pages

**Key Features:** • 13 individually customizable SVG stroke colors • Adjustable stroke width, outline, opacity, overscan, and SVG fit • Gradient, solid, or responsive image backgrounds • Original, sequential, and reverse draw orders • Draw time, stagger, timing variation, and hold controls • Scroll smoothing, start/end range, fallback length, and invert mode • Responsive sizing across desktop, tablet, and mobile • Static Canvas/export rendering and offscreen animation pausing for better performance

**How It Works**

Place the component in your layout and scroll to drive the stroke timeline. For a longer cinematic sequence, place it inside a sticky frame within a taller scrolling section. Start and End control where the animation runs, while Smoothing controls how closely the strokes follow scroll progress.

**Questions?** Reach out at [hasanwali6890@gmail.com](mailto:hasanwali6890@gmail.com)

**Refund Policy**

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

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

-   All · #11070

## Details

- **Author**: Hasan Wali
- **Price**: $8.00
- **Published**: 2026-08-30
- **Updated**: 2026-08-30
- **Added**: 2026-08-30
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows