---
title: "SVG Flow Scroll v1 — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Hasan Wali · Sections. Scroll-Scrubbed Ribbon Animation"
canonical: "https://framer.elliotli.dev/component/svg-flow-scroll-v1"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/SVG Flow Scroll v1

# SVG Flow Scroll v1

Scroll-Scrubbed Ribbon Animation

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

![SVG Flow Scroll v1 preview image 1](https://framer.elliotli.dev/og/component/svg-flow-scroll-v1/322dab17f0a33ef0/1600x903.jpg)

## Summary

Scroll-Scrubbed Ribbon Animation

## Description

**About this Component**

Haytham Ribbon Flow is a responsive, scroll-scrubbed SVG ribbon animation for bold hero sections, transitions, and immersive landing pages. As visitors scroll, layered color stripes draw across the screen, curved ribbons sweep through the composition, and the rows exit in sequence for a smooth choreographed finish.

**Perfect For**

Creative portfolios, agency sites, launch pages, editorial experiences, campaigns, and distinctive scroll-driven transitions.

**Key Features**

• Fully scroll-scrubbed animation • 9 ribbon colors + 2 curve colors • Custom background and outline styling • Adjustable draw timing, stagger, curve timing, overlap, row exit, and direction • Separate desktop and mobile ribbon widths • Adjustable breakpoint, curve scale, and X/Y position • Scroll start/end mapping and smoothing • Static Canvas/export preview • Off-screen animation work pauses automatically • Responsive at any component size • No external packages or page scroll hijacking

**How It Works**

Place the component inside a sticky 100vh frame, then place that frame inside a taller scrolling section—around 2000–3000px works well. Ribbon Flow automatically uses the nearest taller parent as its scroll range, so no section linking or extra setup is required.

**Customization**

Use the organized Framer controls to adjust colors, outline, responsive width, curve placement, scroll mapping, choreography, and exit direction.

**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 · #10112

## Details

- **Author**: Hasan Wali
- **Price**: $9.00
- **Published**: 2026-08-30
- **Updated**: 2026-08-30
- **Added**: 2026-08-30
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove