Kinetic Scroll Divider

Overview

Kinetic Scroll Divider adds an animated decorative line between WordPress page sections.

Use it for:

• Hero-to-content transitions
• Feature section separators
• Service page sections
• Pricing layouts
• Portfolio entries
• Editorial content
• Calls to action
• Long landing pages

The divider is rendered on the server and revealed on the frontend when it enters the viewport.

It is a decorative element and does not contain text, links, or interactive controls.

Add the block

1. Open a page or post in Gutenberg
2. Place the insertion point between two sections
3. Search for Kinetic Scroll Divider
4. Insert the block
5. Configure its color, dimensions, spacing, and animation
6. Update the page
7. Scroll to the divider on the public frontend

The editor shows the divider in its completed state so it remains easy to select and configure.

The actual entrance animation runs on the frontend.

Styling and Geometry

Open Styling & Geometry to configure the line.

Line Color

Choose the solid color used by the divider.

Default:

#10b981

Select a color that contrasts with the page background without competing with the surrounding content.

The selected color is also used by the basic Free glow.

Line Opacity

Controls the visibility of the line.

Available range:

0.1–1.0

Default:

1.0

Use:

• 0.2–0.5 for a subtle separator
• 0.6–0.8 for a visible decorative line
• 1.0 for full opacity

Opacity affects the complete divider, including its selected solid or gradient appearance.

Thickness

Controls the line height.

Available range:

1–20 px

Default:

2 px

Recommended uses:

• 1–2 px for minimal layouts
• 3–5 px for decorative section breaks
• Larger values for strong graphic treatments

Very thick dashed or dotted lines can appear visually heavy.

Width

Controls the divider width as a percentage of the available container.

Available range:

10–100%

Default:

100%

The percentage is calculated relative to the width available inside the block’s parent container.

Examples:

• 25% creates a short accent line
• 50% creates a medium divider
• 100% fills the available width

Alignment

Choose how a divider narrower than 100% is positioned:

• Left
• Center
• Right

Alignment is most noticeable when Width is below 100% or when a PRO maximum width is active.

Border Style

Choose the line pattern:

• Solid
• Dashed
• Dotted

Solid

Creates a continuous line.

Use it for modern, minimal, or strong section transitions.

Dashed

Creates repeated line segments.

Use it for technical, editorial, timeline, or process-oriented designs.

Dotted

Creates a lighter repeated-dot effect.

Use it when the separator should remain subtle.

Border Style controls the pattern of the line. It is separate from the PRO Solid or Gradient color mode.

Vertical Spacing

Choose a spacing preset:

• Tight
• Normal
• Spacious

Tight

Keeps the divider close to the surrounding content.

Use it inside compact card layouts or closely related content groups.

Normal

Provides balanced spacing for standard page sections.

Spacious

Creates a stronger separation between large landing-page sections.

For precise spacing, use the native WordPress Padding control.

Native padding overrides the quick spacing preset.

Kinetic Scroll Divider also supports WordPress margin controls.

WordPress alignment

The block supports:

• Wide width
• Full width

Theme support determines the final result.

A Full Width divider can still be restricted when it is placed inside a narrow Group, Column, or template container.

FREE color mode

KineticHub Free uses a solid line color.

The color, opacity, thickness, width, pattern, and glow can still be customized.

Gradient Color — PRO

KineticHub PRO adds a Color Mode setting:

• Solid Color
• Gradient

When Gradient is selected, the solid Line Color control is replaced by a gradient picker.

Included gradient presets:

• Cosmic
• Emerald
• Sunset

You can also create a custom gradient through the WordPress Gradient Picker.

Gradient direction and color stops are controlled by the selected gradient.

The Line Opacity setting continues to affect the final divider.

Maximum Width — PRO

Max Width Restriction limits the divider to a maximum pixel width.

Available range:

0–2000 px

Default:

0

A value of 0 means no maximum-width restriction.

This setting works together with Width Percentage.

For example:

• Width: 100%
• Maximum Width: 800 px
• Alignment: Center

The divider fills the available space until it reaches 800 pixels, then remains centered at that maximum width.

This is useful on very wide desktop layouts.

Scroll Animation

Open Scroll Animation to configure how the divider appears.

Draw from Center

The line expands outward from its center.

This is the default animation.

It works well for centered section transitions and symmetrical layouts.

Draw from Left

The line grows from left to right.

Use it with left-aligned headings or content that follows a left-to-right visual direction.

Draw from Right

The line grows from right to left.

Use it for right-aligned or intentionally asymmetric designs.

Fade In

The complete line remains in position and gradually becomes visible.

Use Fade In for subtle layouts where directional movement would be distracting.

Animation Duration

Controls how long the Trigger Once animation takes to complete.

Available range:

0.2–4 seconds

Default:

1.2 seconds

Use:

• 0.4–0.8 for a quick transition
• 1.0–1.5 for a normal decorative reveal
• 2.0–4.0 for slow cinematic movement

The duration control is not shown when the PRO Scrubbing engine is selected because scrub progress is controlled by scrolling rather than a fixed duration.

Engine Mode — PRO

KineticHub PRO includes two animation engines:

• Trigger Once
• Tie to Scrollbar (Scrubbing)

Trigger Once

The divider animates when it first enters the viewport.

After the animation begins, the divider is no longer observed and remains fully visible.

Scrolling upward does not reset or replay the animation during the same page load.

Use Trigger Once for:

• Standard section entrances
• Lightweight page decoration
• Short landing pages
• Dividers that should remain visible after appearing

Tie to Scrollbar — Scrubbing

The divider’s progress is connected directly to page scrolling.

As the divider moves through its activation range:

• Scrolling downward draws the line
• Scrolling upward reverses the line
• Progress remains between 0% and 100%
• The animation responds continuously rather than playing once

The current engine calculates the complete draw across a scroll distance equal to approximately 35% of the viewport height.

Use Scrubbing for:

• Long storytelling pages
• Scroll-driven section transitions
• Interactive editorial layouts
• Dividers that should respond in both scroll directions

Scrubbing adds scroll and resize tracking, so use it selectively rather than on every separator on a long page.

Trigger Offset — PRO

Moves the viewport point used to begin the Trigger Once animation or calculate Scrub progress.

Available range:

-50–50%

Default:

0%

Use this setting when the divider:

• Starts too early
• Starts too late
• Sits below a large fixed header
• Needs to coordinate with nearby scroll animations

Test the selected value on the public frontend because the correct offset depends on viewport height, surrounding spacing, and the selected engine.

Advanced Easing — PRO

Controls how the geometric draw accelerates and finishes.

Available modes:

• Smooth — Ease Out
• Linear — Constant
• Bouncy — Overshoot

Smooth

Begins quickly and settles gently near the end.

This is the recommended general-purpose option.

Linear

Uses a constant movement rate.

It works well with technical, minimal, or precisely timed layouts.

Bouncy

Adds an overshoot-style finish.

Use it for playful designs or thicker decorative lines.

The difference is most visible with Draw from Center, Left, or Right.

Opacity Curve — PRO

Controls how the line opacity develops during the reveal.

Available modes:

• Soft
• Linear
• Snappy

Soft

Introduces the line gradually.

Use it for ambient and elegant layouts.

Linear

Changes opacity at an even rate.

Snappy

Makes the line become visible more decisively.

Easing controls the draw movement, while Opacity Curve controls how visibility changes during that movement.

Neon Glow

Enable Neon Glow to add a luminous halo around the line.

The Free edition includes the Low glow using the selected line color.

Glow works best on:

• Dark backgrounds
• Hero sections
• Technology layouts
• Night-mode designs
• Strong accent colors

Disable glow for minimal editorial or print-style layouts.

Glow Intensity — PRO

KineticHub PRO adds three intensity levels:

• Low
• Medium
• High

Low

Creates a restrained halo close to the line.

Medium

Provides a more visible glow suitable for dark section backgrounds.

High

Creates the strongest luminous effect.

Use High carefully because it can overpower nearby text or appear clipped inside containers with hidden overflow.

Glow Color Mode — PRO

Choose how the glow color is produced:

• Same as Line
• White Tint
• Soft Mix

Same as Line

Uses the divider color or gradient appearance as the glow reference.

White Tint

Creates a lighter, more neutral halo around the line.

Soft Mix

Combines the line color with a softer luminous treatment.

Test the result against the final page background. Advanced glow modes can appear very different over light and dark surfaces.

Device Visibility

Device Visibility is available in both Free and PRO.

Choose:

• All Devices
• Desktop Only
• Mobile Only

All Devices

Displays the divider at every supported viewport width.

Desktop Only

Hides the divider on mobile widths.

Mobile Only

Hides the divider on desktop widths.

The responsive breakpoint is approximately:

768 px

Use responsive visibility only for decorative adjustments.

Do not rely on the divider as the only indication that two content areas are separate.

Mobile Behavior — PRO

KineticHub PRO provides a separate mobile presentation.

Available options:

• Same as Desktop
• Thinner — 1px
• Shorter — 50%
• Custom Shorter
• Hide

Same as Desktop

Keeps the desktop thickness and width settings.

Thinner

Changes the mobile line thickness to 1 pixel.

Use it when the desktop divider feels too strong on a narrow screen.

Shorter

Changes the mobile width to 50%.

The selected Alignment controls where the shorter divider appears.

Custom Shorter

Displays the Mobile Width control.

Available range:

10–100%

Use it to choose an exact mobile width.

Hide

Removes the divider on mobile while preserving it on desktop.

This is separate from Device Visibility and is useful when the main layout should remain identical but the decorative line is unnecessary on small screens.

Static on Mobile — PRO

Displays the completed divider immediately on mobile without running its entrance animation.

The breakpoint is approximately:

768 px

Static on Mobile can be combined with:

• Same as Desktop
• Thinner
• Shorter
• Custom Shorter

When used with the Scrubbing engine, mobile progress is immediately set to 100%.

Use this setting when:

• Mobile motion should remain minimal
• Several animated dividers appear on one page
• The line should be visible immediately
• Scroll-driven effects feel unnecessary on touch devices

Reduced Motion Behavior — PRO

Choose what happens when the visitor enables the operating system’s reduced-motion preference.

Available options:

• Static — Show Immediately
• Fade In
• Hide

Static

Displays the completed divider immediately without drawing it.

This is the default behavior and the behavior used by the Free edition.

Fade In

Replaces directional drawing with a brief fade.

Hide

Removes the complete decorative divider.

Because the divider is decorative, hiding it does not remove essential content.

Reduced-motion handling takes priority over the normal animation engine.

Editor and frontend behavior

Inside Gutenberg, the divider is displayed in its completed state.

This allows you to configure:

• Color
• Width
• Thickness
• Alignment
• Border style
• Glow
• Spacing
• Mobile appearance

The actual Trigger Once or Scrubbing behavior should be tested on the frontend.

The editor adds a minimum selectable area around the divider so that a thin line remains easy to select.

Accessibility

The complete frontend output uses:

aria-hidden="true"

Screen readers do not announce the decorative divider.

The block does not act as a semantic horizontal rule.

Use proper page structure to communicate meaning:

• Headings
• Sections
• Groups
• Lists
• Landmark regions

Do not use the divider as the only indication that a new topic has started.

When reduced motion is requested, the block uses the selected static, fade, or hidden fallback.

Performance and browser fallback

Trigger Once uses Intersection Observer and stops observing the divider after it becomes visible.

Scrubbing uses requestAnimationFrame during scroll and resize events to update the line progress.

The block also:

• Detects dynamically inserted divider blocks
• Cleans up removed instances
• Supports AJAX-loaded layouts
• Displays the divider immediately when Intersection Observer is unavailable

The animation uses transform-based rendering to avoid repeatedly changing layout dimensions.

Recommended configurations

Minimal content divider

• Color: neutral theme color
• Opacity: 0.3–0.5
• Thickness: 1 px
• Width: 40–60%
• Alignment: Center
• Border Style: Solid
• Animation: Fade In
• Duration: 0.6–1.0
• Glow: Disabled
• Spacing: Normal

Technology section divider

• Color: bright accent
• Opacity: 0.8–1.0
• Thickness: 2–3 px
• Width: 70–100%
• Animation: Draw from Center
• Duration: 1.0–1.5
• Glow: Enabled
• Border Style: Solid

With PRO:

• Gradient color
• Medium glow
• Smooth easing
• Soft opacity curve
• Static on mobile

Editorial divider

• Thickness: 1–2 px
• Width: 25–50%
• Alignment: Left
• Border Style: Dotted or Dashed
• Animation: Draw from Left
• Glow: Disabled
• Spacing: Spacious

Scroll-driven PRO divider

• Engine: Scrubbing
• Draw Animation: Center or Left
• Width: 60–100%
• Trigger Offset: adjusted for the page layout
• Easing: Smooth
• Mobile Behavior: Shorter
• Static on Mobile: Enabled

Troubleshooting

The divider is missing

Check:

• Kinetic Scroll Divider is enabled in the KineticHub dashboard
• Device Visibility is correct
• PRO Mobile Behavior is not set to Hide
• PRO Reduced Motion Behavior is not set to Hide
• The line opacity contrasts with the background
• The page was updated
• Cached CSS was cleared

The divider is difficult to see

Increase:

• Line Opacity
• Thickness
• Width
• Color contrast
• Glow intensity in PRO

Also check whether the selected line color is similar to the section background.

The divider does not animate

Check:

• You are testing the public frontend
• Reduced Motion is not enabled
• Static on Mobile is not enabled
• The block enters the viewport normally
• Frontend JavaScript loads
• JavaScript delay is not blocking initialization

The animation already completed when the page opened

The divider may have been inside the viewport at initial load.

Move it lower on the test page or reload the page from above the section.

The Trigger Once animation does not replay

This is expected.

Trigger Once runs only the first time the divider enters the viewport during that page load.

Use PRO Scrubbing when the line should reverse and redraw with scrolling.

Scrubbing does not respond to scrolling

Confirm that:

• KineticHub PRO is active
• Engine Mode is set to Scrubbing
• Reduced Motion is disabled
• Static on Mobile is disabled
• Frontend JavaScript loads
• The page uses normal window scrolling
• A smooth-scroll plugin is not replacing the scroll container

The divider starts too early or too late

Adjust the PRO Trigger Offset and test again on the frontend.

Also check:

• Fixed header height
• Large Spacer blocks
• Parent padding
• Viewport height
• Other scroll-animation plugins

The divider width does not change

Check:

• Width Percentage
• Maximum Width in PRO
• Alignment
• Parent container width
• Wide or Full alignment
• Native WordPress padding

The divider appears wider than Maximum Width

Clear generated CSS and confirm that the PRO stylesheet is loading.

Also inspect whether custom CSS overrides the divider track width.

The glow is clipped

Inspect the block and its parents for:

• overflow: hidden
• overflow: clip
• Fixed height
• Insufficient vertical spacing
• Rounded clipping

The divider looks correct on desktop but too strong on mobile

Use PRO Mobile Behavior:

• Thinner
• Shorter
• Custom Shorter
• Hide

You can also enable Static on Mobile.

The divider is visible only on one device type

Review Device Visibility and PRO Mobile Behavior.

A parent section may also contain its own responsive visibility setting.

The selected spacing does not look precise

Use the native WordPress Padding control.

Native padding takes priority over the Tight, Normal, or Spacious preset.

The editor block outline looks larger than the line

This is intentional.

The editor uses a larger selectable area so the thin divider can be selected reliably.

No animation runs in the editor

This is intentional.

The editor displays the completed line. Test the actual animation on the frontend.

Next step

Continue with Kinetic Split Scroll to create a dual-column storytelling layout with pinned media, scrolling content, media swapping, progress indicators, and responsive mobile behavior.