Kinetic Split Scroll

Overview

Kinetic Split Scroll creates a two-column storytelling section:

• A pinned media column
• A scrolling content column

As the visitor scrolls through the section, the media can change according to the total scroll progress.

Use it for:

• Product walkthroughs
• Case studies
• Service explanations
• Feature presentations
• Portfolio stories
• Step-by-step processes
• Editorial narratives
• Landing-page sections

On mobile, the block can retain a smaller sticky media area or place each media item directly into the normal content flow.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Split Scroll
3. Insert the block
4. Select an image or video to initialize the layout
5. Add additional media items
6. Edit the scrolling content
7. Configure the layout and visual settings
8. Update the page
9. Test the complete section on the frontend

The editor begins with a media placeholder. Add the first media item before editing the full split layout.

Understand how synchronization works

Kinetic Split Scroll does not manually attach one image to one specific heading.

Instead, the frontend:

1. Measures the complete Split Scroll section
2. Calculates progress from 0% to 100%
3. Divides that progress across the available media items
4. Activates the corresponding image or video

For example, with three media items:

• Media 1 is active during the first part of the section
• Media 2 is active during the middle part
• Media 3 is active during the final part

The height and spacing of the content determine when each media change becomes visible.

Structure the scrolling content

The initial template includes:

• Spacer
• Heading
• Paragraph
• Large Spacer
• Second heading
• Second paragraph
• Final Spacer

The large spacers create enough vertical distance for the pinned experience.

For a cleaner structure, create each story stage inside a Group block:

1. Group containing a heading, text, and optional button
2. Spacer
3. Second Group
4. Spacer
5. Third Group

This keeps related content together and makes the mobile media placement more predictable.

Avoid relying on many unrelated individual blocks when every media item should represent one clear stage.

Allowed content blocks

The scrolling column directly allows:

• Paragraph
• Heading
• List
• Image
• Button
• Buttons
• Spacer
• Group
• Columns
• Kinetic Magnetic Button
• Kinetic Audio Player

Use Groups when a single story stage needs several related blocks.

A nested Group or Columns block can provide additional layout flexibility inside the scrolling column.

Pinned Media Gallery

Open Pinned Media Gallery to manage images and videos.

Gallery limits

KineticHub Free supports up to:

3 media items

KineticHub PRO supports up to:

50 media items

For most pages, three to six focused stages provide a better experience than a very long gallery.

Add media

Select + Add Media and choose an image or video from the WordPress Media Library.

Supported frontend video detection includes direct:

• MP4
• WebM

Videos play:

• Automatically
• Muted
• In a loop
• Inline on supported mobile browsers

They are presented as decorative media without player controls.

Use Kinetic Video Modal or a normal video block when visitors need playback controls, sound, captions, or manual playback.

Remove media

Use the delete control beside a gallery item.

Removing an item from Split Scroll does not delete the original file from the Media Library.

Media order

Media items follow the order in which they appear in the gallery.

The current editor version does not include reorder buttons for this gallery.

To change the order, remove the affected items and add them again in the required sequence.

Alternative text

Images use the alternative text saved with the media item.

Add meaningful alternative text when an image communicates useful information.

Videos are treated as decorative visual backgrounds. Provide the important information in the scrolling text.

Image Resolution

Choose:

• Full — Highest Quality
• Large — Optimized
• Medium — Faster

Full

Uses the original uploaded image.

Use it only when the pinned area requires the additional resolution.

Large

Provides a practical balance between quality and loading performance.

This is the recommended starting setting.

Medium

Loads a smaller WordPress image size.

Use it for smaller layouts or when source images do not require high resolution.

The selected WordPress size applies to images when that generated size is available. Video files continue using their original URL.

Smart Media Swap

Enable Smart Media Swap — Crossfade to change the active media while visitors scroll.

When disabled, the first media item remains active.

KineticHub Free uses the Fade transition.

KineticHub PRO provides additional transition styles.

Smart Media Swap requires:

• More than one media item
• Sufficient section height
• Normal frontend JavaScript
• A desktop or sticky-mobile scroll experience
• Reduced Motion to be disabled

Image Fit Settings

Image Fit

Choose:

• Cover — Fills area, crops edges
• Contain — Shows whole image
• Fill — Stretches image

Cover

Fills the complete media frame while preserving the media proportions.

Some edges may be cropped.

Contain

Keeps the complete image visible.

Empty space may remain around it.

Fill

Stretches the media to the full frame.

This can distort the source when its aspect ratio differs from the container.

Focal Point

The Focal Point control appears when Cover is selected.

Choose:

• Center
• Top
• Bottom
• Left
• Right

Use it to keep the important subject visible after cropping.

Pinned Media Design

Pinned Area Background

Choose the background color behind the media.

This is useful when:

• Image Fit is set to Contain
• Transparent PNG files are used
• Media does not fill the complete pinned column
• A consistent visual frame is required

The color control supports transparency.

Media Shape Mask — PRO

KineticHub PRO provides:

• Default — Full Fill
• Floating Card — Shadow
• Arch Window
• Tall Pill

Default

Uses the full available media area.

Floating Card

Displays the media as a smaller centered card with rounded corners and a shadow.

Arch Window

Creates a tall frame with a rounded arch at the top.

Tall Pill

Creates a narrow, highly rounded vertical frame.

Floating Card Shadow Opacity — PRO

Appears only when Floating Card is selected.

Available range:

0–0.4

Default:

0.2

Set it to 0 to remove the Floating Card shadow.

Ken Burns Effect — PRO

Adds a slow zoom to the active image or video.

The effect alternates gradually between the normal scale and a slightly enlarged scale.

Use it for:

• Editorial imagery
• Photography
• Product details
• Atmospheric visual stories

Avoid enabling both Ken Burns and strong Inner Image Parallax when the media should remain visually stable.

Overlay and Tint

Open Overlay & Tint.

Overlay Color

Select a color displayed above the pinned media.

Tint Opacity

Available range:

0–1

Default:

0

Use the overlay to:

• Darken bright images
• Unify media with the page palette
• Reduce visual distraction
• Improve separation from progress controls

The overlay does not affect the scrolling text column.

Scroll Effects

Text Column Effect

KineticHub Free includes:

• None — Standard
• Fade Up on Enter

KineticHub PRO also includes:

• Highlight Focus — Dulls Others

None

Displays the content normally.

Fade Up on Enter

Each direct content block starts slightly lower and becomes visible as it enters the viewport.

The effect can reset when the element leaves its observation area.

Highlight Focus — PRO

The content block passing through the central focus area becomes fully visible.

Other direct content blocks become blurred and partially transparent.

This works best when each story stage is placed inside one Group block.

Magnetic Snap to Content

Adds proximity-based scroll-snap alignment to the direct blocks in the content column.

It encourages content items to settle near the center of the viewport.

The result depends on:

• Browser behavior
• Page scrolling context
• Parent containers
• Smooth-scroll plugins
• Direct content structure

Scroll snapping is disabled in the standard mobile layout.

Use it selectively. Strong snapping can feel restrictive on long text sections.

Progress Indicator

Vertical Line

Available in Free and PRO.

Displays a vertical progress line that fills as the visitor moves through the complete Split Scroll section.

None

Removes the progress indicator.

Pagination Dots — PRO

Displays one dot for each media item.

The active dot follows the currently active media.

When Interactive Navigation — Dots is enabled, visitors can select a dot to smooth-scroll to the approximate section represented by that media item.

Floating Percentage — PRO

Displays progress from:

0% to 100%

The value updates while the visitor scrolls through the section.

Accent Color

Controls the active color used by:

• Progress line
• Active pagination dot
• Percentage text
• Related indicator highlights

The indicator is positioned automatically near the inner edge of the pinned column.

Progress indicators are hidden in the mobile layout.

Layout Settings

Pinned Side

Choose:

• Left
• Right

This changes the order of the media and content columns.

Column Ratio

Choose:

• 50/50
• 40/60
• 60/40

The ratio refers to the left and right sides of the layout.

The selected pinned side determines which percentage belongs to the media column.

Example:

• Ratio: 40/60
• Pinned Side: Left
• Media: 40%
• Content: 60%

With the pinned side on the right, the same ratio gives the media column 60%.

Sticky Top Offset

Available range:

0–200 px

Use it to account for:

• Fixed site header
• Sticky navigation
• Announcement bar
• Other content at the top of the viewport

The pinned media height is calculated from the viewport height minus this offset.

Test the value while logged out because the WordPress administration toolbar changes the visible top area.

Mobile Stacking

Choose:

• Media on Top
• Text on Top

This controls whether mobile media appears before or after its related content.

Mobile behavior

Kinetic Split Scroll changes its layout at approximately:

768 px

Sticky Media disabled

This is the default mobile behavior.

When Enable Sticky Media on Mobile is off:

• The desktop pinned column is hidden
• Each media item is copied into the scrolling content
• Media appears at full available width
• Images use a contained presentation
• The layout becomes a normal mobile content flow
• The progress indicator is hidden
• Scroll snap is disabled
• Text effects are removed

Spacer blocks help the frontend identify separate content stages.

Each media item is inserted beside the corresponding content group in gallery order.

Sticky Media enabled

When Enable Sticky Media on Mobile is on:

• The pinned media area remains sticky
• Its height is limited to approximately 45% of the viewport
• The content continues scrolling
• Mobile Stacking controls whether media appears before or after the content column
• Smart Swap can continue operating

Test this mode on a real phone.

A sticky media area can occupy too much space when:

• The image is tall
• The phone is in landscape orientation
• A fixed mobile header is present
• The content uses large headings

Smart Addons — PRO

Interactive Navigation — Dots

Appears only when the indicator style is Pagination Dots.

Allows visitors to select a dot and move to the approximate scroll segment associated with that media item.

Smart Swap Transition

Choose:

• Smooth Fade
• Vertical Wipe
• Circle Reveal
• Diagonal Cut

Smooth Fade

Crossfades between media layers.

Vertical Wipe

Reveals the new media vertically.

Circle Reveal

Expands the new media outward from the center.

Diagonal Cut

Reveals the new media with a diagonal clipping transition.

Reduced Motion replaces the advanced clipping transitions with a simpler presentation.

Inner Image Parallax

Moves the media frame slightly as the visitor progresses through the section.

The movement is intentionally subtle and includes a small scale increase to avoid exposing empty edges.

It is disabled when the visitor requests reduced motion.

Ambient Background Glow

Adds a blurred glow behind the pinned media.

When enabled, configure:

• Glow Color
• Glow Spread

Glow Spread

Available range:

10–150 px

Higher values create a larger, softer halo.

Use transparency in the glow color for a more restrained result.

Dynamic Background Morphing

Transitions the complete Split Scroll background between two colors as the visitor scrolls.

Configure:

• Start Color — 0% Scroll
• End Color — 100% Scroll

The colors can include transparency.

The end color is applied through a layer whose opacity follows the scroll progress.

Background morphing is removed when reduced motion is enabled.

Custom Shadows — PRO

Enable Container Shadow to apply a shadow around the complete Split Scroll block.

Current active styles include:

• Soft — Classic
• Crisp — Solid
• Floating — Diffused
• Elegant Luxury

Soft

Creates a normal blurred shadow.

Crisp

Creates a hard offset shadow.

Floating

Creates a deeper shadow and raises the complete block slightly.

Elegant

Combines two soft shadow layers.

The current frontend uses the selected base shadow color and desktop blur or softness value where supported.

Avoid strong container shadows when the Floating Card media shape already has a large shadow.

Visibility — PRO

KineticHub PRO includes:

• Hide on Mobile
• Hide on Desktop

The breakpoint is approximately:

768 px

These options hide the complete Split Scroll block, including its text content.

Do not hide essential information without providing it elsewhere on the page.

WordPress design controls

Kinetic Split Scroll supports standard WordPress controls for:

• Wide alignment
• Full alignment
• Margin
• Padding
• Block gap
• Text color
• Background color
• Gradient background
• Border color
• Border width
• Border style
• Border radius

The final full-width result still depends on theme support and the width of the parent container.

Editor and frontend behavior

The Gutenberg editor displays a simplified side-by-side layout.

Inside the editor:

• The pinned column is not truly sticky
• Its preview height is fixed for easier editing
• Text effects remain visible
• Media changes are approximated
• Mobile inline media is not the final reference
• Scroll calculations do not reproduce the public page

Always test the complete experience on the frontend.

Accessibility

The frontend wrapper is identified as a scrollable media region.

The text column remains normal Gutenberg HTML, so:

• Headings retain their hierarchy
• Paragraphs remain readable
• Buttons and links remain keyboard accessible
• Audio Player controls retain their own accessibility
• Magnetic Button links remain normal links

Pagination dots include accessible section labels and active-state information.

The percentage indicator announces updated progress politely.

Use meaningful image alternative text.

Do not rely on decorative videos or animated media as the only source of important information.

Reduced motion

When the visitor enables reduced motion:

• Smart media transitions stop
• Advanced clipping transitions are removed
• Ken Burns stops
• Inner parallax stops
• Background morphing stops
• Progress indicator animation is simplified
• Text remains visible

The normal page content remains readable.

On desktop, the first media item can remain visible instead of continuously changing.

Performance

The block:

• Updates only while it is near the viewport
• Uses requestAnimationFrame for scroll progress
• Recalculates geometry with Resize Observer
• Stops its update loop when offscreen
• Loads the first image eagerly
• Lazy-loads later images
• Cleans up observers when removed dynamically
• Rebuilds mobile inline media after responsive changes

For better performance:

• Use optimized images
• Compress MP4 and WebM videos
• Avoid several long Split Scroll sections on one page
• Keep the number of stages focused
• Avoid combining every PRO visual effect
• Test mobile performance with real devices

Recommended starting setup

For a three-stage product story:

• 3 media items
• Each stage inside one Group block
• Spacer between Groups
• Smart Media Swap: Enabled
• Image Resolution: Large
• Image Fit: Cover
• Pinned Side: Left
• Column Ratio: 50/50
• Sticky Offset: match the site header
• Text Effect: Fade Up
• Progress Indicator: Vertical Line
• Mobile Stacking: Media on Top
• Mobile Sticky: Disabled

With PRO:

• Smooth Fade or Vertical Wipe
• Floating Card media shape
• Floating shadow around 0.15–0.20
• Subtle Ambient Glow
• Inner Parallax only when Ken Burns is disabled
• Static inline media on mobile

Troubleshooting

The block is missing on the frontend

Confirm that it contains media or visible inner content.

The renderer outputs nothing when both the gallery and content are empty.

The media does not remain pinned

Check:

• Section height
• Sticky Top Offset
• Parent overflow
• Parent transforms
• Media height
• Desktop viewport width
• JavaScript optimization

Test the block inside a normal top-level Group.

Media changes too early or too late

Smart Swap divides the complete section progress across the number of media items.

Adjust:

• Content height
• Spacer heights
• Group structure
• Number of media items

There is no manual media-to-heading assignment in the current version.

One media item never appears

Confirm that:

• Smart Media Swap is enabled
• The section has enough scroll distance
• The item URL is valid
• Reduced Motion is disabled
• The item is inside the Free or PRO gallery limit

Videos are displayed as images or fail to loop

Use a direct URL ending in:

• .mp4
• .webm

URLs with an unsupported extension or certain query-string formats may not be recognized as video media.

Mobile media is missing

When Mobile Sticky is disabled:

• Clear mobile caches
• Confirm media items exist
• Check custom CSS
• Check whether inline media clones are present
• Keep content divided into meaningful stages
• Test without JavaScript delay

Mobile media appears between unexpected text blocks

Use one Group block for each story stage and separate stages with Spacer blocks.

The mobile fallback uses the direct content structure to decide where media should be inserted.

The progress dots move to an unexpected position

Dots navigate to an approximate scroll segment based on the complete block height.

Large leading Spacer blocks can make the landing point feel lower than the first heading.

Adjust the content structure and Spacer placement.

Progress indicators disappear on mobile

This is intentional.

The current mobile layout hides the line, dots, and percentage indicators.

Fade Up or Focus does not run on mobile

Mobile content is displayed in a static readable state.

The text effects are disabled at the mobile breakpoint.

Magnetic Snap is not noticeable

Snap behavior depends on browser support and the page’s scroll context.

Use direct Group blocks with sufficient vertical spacing and test without third-party smooth scrolling.

The media is cropped

Change:

• Image Fit
• Focal Point
• Source crop
• Column ratio

Use Contain when the complete image must remain visible.

Floating Card shadow is too strong

Reduce Floating Card Shadow Opacity.

Set it to 0 to remove the shadow.

Ken Burns or parallax does not run

Check:

• KineticHub PRO is active
• Reduced Motion is disabled
• The block is using a sticky scroll experience
• Frontend JavaScript is loading
• Optimization is not delaying the script

The editor does not reproduce the sticky effect

This is intentional.

The final sticky position, media synchronization, progress, and mobile fallback must be tested on the public frontend.

Next step

Continue with Kinetic Typography to create animated headings and text with reveal, blur, pop, split-text, hover, continuous, reflection, and advanced PRO effects.