Gives your page depth: the content moves at a different pace than the rest of the page while the visitor scrolls. This classic parallax effect is often seen in heroes and large photo sections. The technical name is GsapParallax.
Use GsapParallax on large hero images or photo sections where you want a sense of depth without a heavy animation library. It works well on a hero banner, a full-width section image between blocks of text, or a background photo behind a Cta section.
Keep the effect subtle — a small offset reads as polish, a large one can feel distracting or cause layout jumps on mobile. It's best used sparingly, once or twice per page, rather than on every image.
Using depth without overdoing it
On a webshop, parallax works well on a seasonal campaign banner at the top of the homepage, giving an otherwise static promotional image a bit of motion as visitors scroll past. On a portfolio site it's a natural fit for the large header image at the top of a case study. On a professional services site it suits a team or office photo in an about section, adding a touch of polish to what would otherwise be a plain image block.
The most common mistake is applying parallax to several images on the same page — the effect is meant to be a rare accent, and repeating it on every photo makes scrolling feel busy rather than polished. A large offset is another frequent issue: it can cause the image to visibly crop or shift awkwardly at certain scroll positions, especially on shorter viewports, so smaller, subtler offsets tend to hold up better across screen sizes. Always check the effect on a phone-sized viewport specifically, since parallax behaves differently when there's much less scroll distance to work with than on desktop.
Parallax pairs naturally with a Hero section or with a background image behind a Cta, where the goal is a sense of depth rather than an attention-grabbing animation. It's a decorative effect, not a content one, so it should never be the only place important information appears.
Because the image itself is unchanged — only its scroll behaviour is animated — the usual image best practices still apply: keep the file size reasonable and set meaningful alt text, since the parallax motion adds visual interest but doesn't change what a screen reader announces about the image.
Example
The prompt for this example
Put this photo on the page with a parallax effect while scrolling.