---
title: "Liquid Wave Divider — Framer component · Best of Framer"
description: "$6.00 · Framer component · by João Porto · Sections. Animated wave that react to scroll"
canonical: "https://framer.elliotli.dev/component/liquid-wave-divider"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Liquid Wave Divider

# Liquid Wave Divider

Animated wave that react to scroll

[View on Framer](https://framer.com/marketplace/components/liquid-wave-divider/?via=elliot-li)

![Liquid Wave Divider preview image 1](https://framer.elliotli.dev/og/component/liquid-wave-divider/e478a3a815ce3ab6/1600x1200.jpg)

## Summary

Animated wave that react to scroll

## Description

Animated Liquid Divider replaces hard edges between sections with a living, layered wave — rendered on canvas, animated in real time, and reactive to scroll: scrolling agitates the surface like real liquid, with ripples that travel in the direction you scroll.

**Features**

-   Up to 5 depth layers with organic, non-repeating motion
    
-   Scroll agitation: waves churn and ripple as the user scrolls
    
-   4 directions (up, down, left, right) — works as a horizontal or vertical divider
    
-   Full transparency support: fade either color to 0 and the liquid effect stays intact
    
-   Waves never clip outside the component bounds, at any amplitude
    
-   10 property controls, zero code required
    

**Performance**

Lightweight 2D canvas (no WebGL, no libraries). Pauses automatically when off-screen, renders a static frame in the editor, and respects prefers-reduced-motion.

**How to use**

1.  Drag onto your canvas and set Position to Absolute
    
2.  Pin it to the section edges: set Left and Right to 0 so the divider stretches edge to edge (setting Width to 100% or Fill also works)
    
3.  Set Height to your transition size (e.g. 160px) and place it overlapping the edge between two sections. Tip: use the top/bottom pin toggle to anchor the divider to the right edge — this is the most reliable method, especially when using transparency. Any placement that sits the component over the section boundary will work.
    
4.  Match Color 1 and Color 2 to your section backgrounds — or use transparency
    

Built with procedural canvas animation and real-time scroll physics — motion that goes beyond what preset effects can do.

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

-   All · #796

## Details

- **Author**: João Porto
- **Price**: $6.00
- **Published**: 2026-07-06
- **Updated**: 2026-07-06
- **Added**: 2026-07-06
- **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