Divider

Add a shaped transition, like a wave or a slope, that flows smoothly from one section into the next.

Overview

The Divider section places a shape between two sections. Its colors follow the neighboring sections' color schemes automatically, so the shape blends into the section after it without picking any colors — and keeps matching when you change your color schemes later. Choose from six static shapes and four animated ones, or add your own SVG, and place the divider on top of the previous section, between sections or on top of the next one.

Setup

How the colors work

A divider is made of up to three parts: the top part, an optional middle accent, and the bottom part. Match previous section and Match next section use the background color of that section's color scheme, so the divider blends in even after you change your colors.

Animated dividers

The Animated graphics move on their own or as the page scrolls:

• Rolling curve: a wave whose top and bottom layers roll past each other.
• Glitch: horizontal bars that snap sideways now and then.
• Chevrons: arrows that march across the divider, fading out at the edges.
• Mountains: three mountain ranges that move at different speeds for a sense of depth.

The Middle part color is the main color of the moving shapes, and animated graphics always show it. Gradients work too. Each graphic uses the color parts like this:

Where a graphic doesn't use the top part, the section behind the divider shows through above the shapes.

On Rolling curve and Mountains, a gradient is repeated as it moves: each screen width shows the gradient and then its mirror image, so the motion loops without a visible seam.

Motion decides how the graphic moves:

• Continuous moves the graphic all the time, in every browser.
• On scroll moves it only while visitors scroll past the divider, so it feels tied to the page. Firefox doesn't support this yet, so there the divider shows without motion.
• Off shows the graphic as a still image.

Use Flip horizontal to change the direction of the motion.

Updating from an earlier Taiga version

Advanced

This section is intended for developers customising the theme. No changes here are required for normal use.

Color variables

The divider sets --divider-top-fill, --divider-middle-fill and --divider-bottom-fill on .divider-graphics, and section-divider.css applies them to the .top-part, .middle-part and .bottom-part paths. "Match previous/next section" resolve to --divider-previous-bg / --divider-next-bg, generated per color scheme in css-settings-and-variables.liquid:

.shopify-section:has(> .color-{id}) + .section--divider { --divider-previous-bg: <scheme background>; }
.section--divider:has(+ .shopify-section > .color-{id}) { --divider-next-bg: <scheme background>; }

Both fall back to the page background when the neighbor has no color scheme on its direct child.

Animated graphics

All motion is CSS, with no JavaScript. sections/divider.liquid adds divider-motion-continuous or divider-motion-scroll to .divider-graphics and sets --divider-speed (0.5, 1 or 2).

• Rolling curve and Mountains draw each moving layer as its own <svg class="divider-layer divider-slide">, two periods (2880 units) wide, which slides by translateX(-50%). Moving whole elements with transform lets the browser animate them without repainting the shapes. --slide-duration (seconds per loop at medium speed) and --slide-loops (loops per scroll pass) are set per layer.
• Chevrons are HTML. .divider-chevrons-track is masked to a repeating chevron and moves one chevron width per loop, while .divider-chevrons-fill inside it (the middle color) moves back by the same amount, so the gradient stays in place. .divider-chevrons-fade fades the edges with a still mask, so the bottom part can be transparent.
• Glitch rows (.divider-glitch) jitter with steps(). Each row has its own --gx distance, --d duration, --delay and --i snaps per scroll pass.
• On scroll uses a named view-timeline (--divider-pass) on .divider-graphics, inside @supports (animation-timeline: view()).
• A middle gradient on the moving layers is drawn as an SVG <pattern> that shows the gradient and its mirror image in every 1440-unit period, so it loops without a seam.
• prefers-reduced-motion: reduce turns all divider animations off.
• When the middle color is empty, animated graphics use var(--color-button-background), which resolves to the first color scheme.

Custom SVG colors

Give paths in your SVG the classes top-part, middle-part or bottom-part to use the divider's color settings. The CSS fill overrides any fill attribute on those paths.

<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
  <path class="bottom-part" d="M0 60 Q720 0 1440 60 V120 H0 Z"/>
</svg>

Where a middle part sits under the bottom part, end it 2 units above the bottom edge instead of on the edge. When both parts end on the same edge, their anti-aliased edge pixels blend and the middle color shows as a thin line. The built-in shapes follow this rule.