Kinetic Before/After

Overview

Kinetic Before/After lets visitors compare two images inside the same frame.

Use it for:

• Renovations
• Photo retouching
• Website redesigns
• Product improvements
• Restorations
• Case studies
• Design variations

Visitors can drag the comparison handle, click or tap the image, or use the keyboard.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Before/After
3. Insert the block
4. Select the Before Image
5. Select the After Image
6. Configure the comparison settings
7. Update the page and test the frontend

Both images are required. The block does not render on the frontend when either image is missing.

Image setup

For the cleanest comparison, use images with:

• Matching dimensions
• The same aspect ratio
• Similar subject positioning
• Similar crop and perspective

When the source images have different proportions, select a fixed Image Ratio.

Available ratios:

• Auto
• 16:9
• 1:1
• 4:3
• 3:4

Auto preserves the original image proportions. A fixed ratio crops both images into the same frame and helps prevent layout shifts.

Initial position

Use Initial Offset to choose the starting position of the divider.

Available range:

0–100%

A value of 50% displays an equal amount of both images.

Image filters

The After image supports:

• None
• Grayscale
• Sepia
• Blur
• Invert Colors
• High Contrast
• Color Overlay

When using Blur, adjust the blur intensity.

When using Color Overlay, choose the overlay color and opacity.

In the Free edition, the Before image remains unfiltered. KineticHub PRO adds the same filter options to the Before image.

Labels

Enable Show Labels to display text for both image states.

You can customize:

• Before label
• After label

Examples include:

• Before / After
• Original / Edited
• Old / New
• Day / Night
• Draft / Final

Enable Hide Labels While Moving when the labels should disappear during interaction.

KineticHub PRO also adds:

• Custom label color
• Custom label background
• Hide labels on mobile

Handle and divider

The Free edition includes the Classic handle.

Customize:

• Handle color
• Handle icon color
• Divider style

Available divider styles:

• Solid
• Neon
• Gradient

KineticHub PRO adds:

• Minimal handle
• Text handle
• Handle pulse and visual effects

Interaction

Visitors can move the comparison using:

• Mouse dragging
• Touch dragging
• Click or tap
• Keyboard controls

Enable Click to Move to let visitors reposition the divider by selecting anywhere inside the image.

The slider updates its accessible value as the handle moves.

Keyboard controls

When the handle is focused:

• Arrow Right or Arrow Up moves forward
• Arrow Left or Arrow Down moves backward
• Home moves to 0%
• End moves to 100%

Arrow keys move the slider in 5% increments.

Intro animation

Enable Auto Play Intro to briefly move the handle when the block enters the viewport.

This helps visitors recognize that the comparison is interactive.

The Free edition includes the Slide intro.

KineticHub PRO adds:

• Fade
• Scale
• Blur

The intro is skipped when the visitor has enabled reduced motion.

Appearance

The block includes:

• Hover zoom
• Container shadow
• Shadow style
• Wide and full alignment
• Force full width
• WordPress spacing and border controls
• Mobile and desktop visibility

Use hover zoom carefully when the images already contain fine details near their edges.

KineticHub PRO controls

KineticHub PRO adds more advanced comparison behavior.

Orientation

Choose:

• Horizontal
• Vertical

The Free edition uses horizontal comparison.

Transition style

Choose:

• Slide
• Diagonal
• Fade

The diagonal transition also includes a slant-angle control.

Reverse Reveal

Reverses the direction in which the comparison image is revealed.

Mobile Aspect Ratio

Set a separate image ratio for mobile or inherit the desktop setting.

Hover Slide

Moves the comparison as the desktop pointer travels across the image.

Magnetic Snap

Snaps the handle near:

• 0%
• 25%
• 50%
• 75%
• 100%

Inertia

Adds smoother interpolated movement after interaction.

Inertia is disabled when reduced motion is active.

Smart Addons

PRO includes:

• Inner Image Parallax — shifts the images slightly as the divider moves
• Hold-to-Peek — temporarily reveals one side and returns after release
• Action Cursor Badge — displays a customizable label near the pointer
• Swap Before & After — exchanges both images and their labels

Inner Image Parallax and Hover Zoom should not be enabled together.

Responsive visibility

Use the visibility controls to:

• Hide on mobile
• Hide on desktop

After changing visibility, test both the block and its parent containers.

A parent Group or section can also contain its own responsive visibility rule.

Accessibility

The comparison handle uses semantic slider behavior and includes:

• Keyboard navigation
• Accessible minimum and maximum values
• Current-value updates
• Screen-reader labeling
• Touch and pointer interaction
• Reduced-motion handling

Add meaningful alternative text to both images in the WordPress Media Library.

The alternative text should describe the image content or the difference being demonstrated.

Do not place essential information only inside the images.

Recommended starting settings

For a standard comparison:

• Initial Offset: 50%
• Image Ratio: 16:9 or Auto
• Divider: Solid
• Classic handle
• Click to Move: Enabled
• Auto Play Intro: Enabled
• Hover Zoom: Disabled
• Labels: Enabled
• Shadow: Soft

Adjust the ratio to match the source images.

Troubleshooting

The block is missing on the frontend

Confirm that both the Before and After images are selected.

The two images do not align

Use images with matching dimensions or select a fixed Image Ratio.

One image is heavily cropped

Check the selected ratio and source-image orientation.

Portrait and landscape images should normally not be mixed in the same comparison.

The handle cannot be dragged

Check:

• Frontend JavaScript
• Parent overlays
• pointer-events
• Parent overflow
• JavaScript optimization
• Whether another element covers the handle

Test the block outside its current parent container.

The handle or arrows are clipped

Inspect parent containers for:

• overflow: hidden
• overflow: clip
• Transforms
• Fixed heights
• Z-index conflicts

Clicking the image does not move the handle

Confirm that Click to Move is enabled.

The intro animation does not run

Check:

• Auto Play Intro is enabled
• Reduced Motion is disabled
• The block entered the viewport normally
• JavaScript delay is not active

The Before filter is unavailable

Before-image filters are included in KineticHub PRO. The Free edition displays the original Before image.

The editor and frontend move differently

The editor provides a visual preview. Drag physics, inertia, snapping, hover behavior, and the complete frontend interaction should be tested on the published page.

Next step

Continue with Kinetic Box to create an interactive container with nested content, depth, tilt, lighting, hover movement, and advanced visual styling.