Animated Separator

Standalone SVG separator module with its own 20-shape library, SVG path morphing, and scroll-scrubbed wave deformation. Drop it into any row to create custom section transitions that BB's built-in row shapes can't do.

20
Shapes
3
Animations
SVG
Path Morph

Wave + Gentle Drift

Classic wave with slow continuous drift. Subtle background motion that adds life to a section without being distracting.

Clouds + Wave Morph (Scroll)

Scroll-scrubbed SVG path morphing — the cloud shape deforms in real-time as you scroll. This is what makes Animated Separator different from Shape Animator.

Gentle Wave + Grow Reveal

Scroll-triggered path morph from flat line into the final wave shape. The grow animation is path-based — unique to this module.

Mountains + Slow Drift

Mountain silhouette drifting slowly across the horizon. 40-second cycle for a calm, atmospheric landscape effect.

Pine Trees + Morph Trigger

One-shot wave morph when the separator scrolls into view — trees grow upward from a flat line. High intensity (150%) for dramatic effect.

Double Wave + Scale Reveal

Double-layered wave with scale-up entrance animation. The separator scales from small to full size as it enters the viewport.

Grass + Gentle Drift

Organic grass shape with slow alternating drift — subtle breeze-like sway that feels natural and calming.

All Available Options

Shapes (20)
WaveGentle WaveDouble WaveWaves BrushCurve AsymmetricalTriangleTriangle AsymmetricalTiltCurveZigzagPyramidsSplitArrowsFanMountainsCloudsDropsGrassPine TreesSlime
Animation Modes
None (Static)Drift (Continuous)Scroll RevealWave Morph
Drift Options
Direction: LeftDirection: RightDirection: AlternateEasing: LinearEasing: Ease In-OutEasing: Ease InEasing: Ease Out
Reveal Styles
Grow (flat to shaped)Fade UpSlide InScale Up
Wave Morph
Scrub (tied to scroll)Trigger (plays once)Morph Intensity (0-200%)
Layout Controls
Position: TopPosition: BottomFlip: HorizontalFlip: VerticalFlip: BothHeight (px)Width (%)ColorOpacity