Parallax scrolling in WordPress without GSAP: the parallax effect with a from/to scroll animation

Parallax is one of the oldest scroll effects on the web, and one of the easiest to get wrong. This guide shows real examples, the three ways to build it, and how to do it in WordPress without GSAP.

Parallax effect examples: hero images, layered backgrounds, cards and galleries

A hero image that moves slower than the text over it, a background that drifts behind foreground content, a card whose image shifts as the card scrolls past — all parallax, all the same underlying idea: one layer moves at a different rate than another.

How parallax scrolling works: layers moving at different speeds as the page scrolls

The page itself scrolls at one speed. A parallax layer is offset by a fraction of that distance, so it appears to move slower (or, less often, faster). The bigger the difference in speed between layers, the stronger the sense of depth — and the easier it is to overdo.

Three ways to build a parallax effect: background-attachment, CSS transforms, JavaScript

Method	Works on mobile?	Needs a script?
background-attachment: fixed	No — most browsers ignore it	No
CSS transform on scroll	Yes	A small one — or none, with animation-timeline
JavaScript / GSAP ScrollTrigger	Yes	Yes, a full library for a complex scene

background-attachment: fixed and scroll, and why the fixed background fails on mobile

.parallax-bg {
  background-image: url(photo.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

The oldest method: one CSS property, background-attachment: fixed, pins the background to the viewport while the page scrolls over it. It is simple, but most mobile browsers ignore it to protect scroll performance, so a fixed background effectively becomes a static one on a phone.

There is a second catch on the desktop too: with fixed, cover sizes the image against the window, not against the box it sits in, so the crop you set up is not the crop visitors see.

Parallax with CSS transforms driven by the scroll position

A more reliable method reads the scroll position and sets a transform: translateY() on the layer, scaled down from the page’s own scroll distance. This works on every device, because it is a real transform, not a background rendering mode.

CSS can now drive that transform on its own, with no script at all: animation-timeline: scroll() or view() ties the keyframes straight to the scroll. It is the cleanest version of this method, and the catch is support — it is not in every browser your visitors use yet, so it needs a fallback.

Parallax with JavaScript: what GSAP does and the lighter alternative

GSAP’s ScrollTrigger can drive the same transform with a scrub timeline and extra easing options, which is useful for a complex multi-layer scene but is a full library for an effect that is, at its core, one number (scroll progress) mapped to one property (translate).

How to create a parallax effect in Bricks with Fancy Animations: from/to with translate on the image or background

Step by step: the ScrollTrigger controls, start and end, parallax background vs parallax image

Pick the element, add a scroll animation, set the translate distance you want the layer to travel, then set where that travel starts and ends relative to the viewport. A parallax background typically travels a shorter distance than a parallax image sitting in the normal flow, since the background already fills its container.

Pitfalls: mobile, jank, layout shift, motion sickness and using parallax everywhere

Keep the offset small. A large parallax distance on mobile, where the viewport is already short, reads as jarring rather than deep, and can trigger motion sickness for sensitive visitors — respect prefers-reduced-motion and consider disabling or reducing the effect on small screens. And use it on one or two sections per page: parallax on every image stops meaning anything.

The Basic parallax template for Bricks: the setup above, ready to paste

There is no one-click parallax preset: you build it with the from/to scroll animation shown above. If you would rather start from something finished, this template has that exact setup already built, and the changelog is where new animations are announced.

Go further: scroll animations for Bricks, Etch and Gutenberg

Scroll animations covers the from/to controls used here, and scrolling website examples shows parallax next to the other scroll effects on this site.