Oxygen Builder 6 Parallax Columns – Built-In GSAP Scroll Animation

Looking to recreate that beautiful staggered scroll animation from the Breakdance homepage – but using Oxygen Builder 6? You’re in the right place.

In this step-by-step tutorial, I’ll walk you through how to build that smooth, eye-catching animation using GSAP-powered scroll effects built right into Oxygen. No extra plugins, no bloated code—just clean, performance-friendly animation that looks great and performs even better.

We’ll cover how to:

• Set up your layout to support staggered animations
• Use GSAP’s scroll trigger tools in Oxygen’s native animation interface
• Adjust timing, easing, and sequence to match the Breakdance effect
• Optimise the animation for performance and responsiveness

Whether you’re a seasoned Oxygen user or just diving into animation for the first time, this guide will show you how to recreate that polished, professional look—without switching builders.

What We’re Building

A dynamic 5-column layout where:

• Columns 1, 3, and 5 scroll up
• Columns 2 and 4 scroll down

Each column is populated dynamically using a post loop, with images pulled from ACF. The effect creates a smooth vertical parallax animation as you scroll down the page.

Live Example

You can see this in action on our Meet Phe Ledwell page and of course, on the Breakdance homepage.

Key Components

We create two Oxygen components – one for the column that appears to scroll down and another for the column that appears to scroll up. These effects are created by manipulating the vertical position in the scroll animation setting.

These components are then added to the Post Loop element. One is used as the Repeated Block and the other is used as the Alternate Item.

Responsive Columns with CSS

To control the number of columns at smaller breakpoints, I’ll also show you how to use CSS to update your layout cleanly and efficiently — without affecting the scroll animation.

Why This Is Useful

If you’re building modern, dynamic layouts in Oxygen Builder 6, mastering staggered scroll animations can seriously elevate the feel of your site. This technique adds subtle, professional movement to your pages—drawing attention where it matters without overwhelming your content.

It’s particularly effective on:

• Portfolio galleries, where you want each project or image to appear with purpose
• Testimonials or reviews, adding rhythm and pacing to your social proof
• Case studies, to guide visitors through a narrative, step by step
• Service overviews, where staggered entries can highlight individual offerings clearly

And the best part? You get all this without any plugins or custom JavaScript. By using GSAP scroll animations through Oxygen’s built-in Interactions UI, you retain full visual control inside the builder. That means fewer dependencies, faster load times, and a smoother workflow—ideal for both performance and client handoffs.

Whether you’re looking to boost engagement or simply want your site to feel more polished, this is a powerful, low-overhead technique to keep in your Oxygen toolbox.