Parallax effect

Parallax effect

This tutorial shows how to build a horizontal parallax effect, where rows of content drift sideways at different speeds as visitors scroll.

Difficulty:
Beginner
Time:
~10 min

This horizontal parallax effect WordPress technique gives a section a sense of motion and depth, rows of content drift across the screen as the page scrolls, instead of just sitting still like the rest of the page.

Add and prep the content

Add a library element

From the Add panel, add a Library element above the section you want the effect on, then pick a testimonial layout to start from, for example one that stacks rows.

Remove the column layout

Select the container and clear its column subclass, either by deleting it or by reselecting the element class in the toolbar. This removes the multi-column layout, so the rows are free to be arranged differently.

Duplicate the content

Collapse the rows in the Navigator and duplicate them, a horizontal parallax effect needs enough content to actually feel like it’s moving.

Arrange it in a grid

Wrap the rows in a grid

Wrap one row in a Grid element, then move the rest of the rows into that same grid.

Lay the rows out side by side

Set the grid’s flow to Column so the rows sit next to each other instead of stacking, then set a default column width, for example 500px, so they have enough room to breathe.

Center the grid

Select the container and set Content X to Center so the grid stays aligned instead of overflowing off one side.

Animate it on scroll

Add a while-scrolling interaction

Select the section and add a new While scrolling interaction, with the grid as its target.

Translate the grid horizontally

Choose the Translate X action, and set its initial value to 10% and its end value to -10%, so the grid drifts across as the page scrolls.

Adjust the duration and timing

Lower the duration if you want the motion to feel faster, and adjust the interaction’s start and end points, for example starting as soon as the grid enters the screen, so the effect feels responsive rather than delayed.

Duplicate it in reverse for a second grid

Duplicate the grid and apply the same Translate X effect, but reverse the values, initial at -10% and end at 10%, so the two grids drift in opposite directions.

Result

The rows now sit side by side in a grid that drifts horizontally as the page scrolls, and duplicating the effect in reverse on a second grid gives the layout a sense of depth instead of everything moving in the same direction.

Last updated: July 13, 2026

Still have more questions? Let us help!

Your cookie preferences

We use cookies to improve your experience, analyze traffic, and personalize content. By clicking "Accept all" you agree to storing them on your device. Read our privacy policy.