Use Scroll Effects to create a 3D parallax hero section

Are you ready to get confident with Scroll Effects and start creating more advanced, layered animations in your builds?

This tutorial is a great place to start. It walks through a practical, real-world use case—building a 3D parallax hero—while showing you how Scroll Effects actually behaves as you work with it.

If you’ve been exploring Scroll Effects and want to move beyond simple animations, this is the tutorial for you! Let’s explore the Custom Timeline so you can start creating truly bespoke websites that your clients will love.

Why this effect works

Flat hero sections are easy to build, but they don’t always hold attention.

A layered parallax effect adds depth:

• Foreground and background move at different speeds

• Subtle scaling creates a sense of perspective

• Motion responds to scroll, making the page feel interactive

The result is something that feels considered, not overdesigned.

Step 1: Prepare your image layers

Start with a single image and split it into separate layers:

• Background

• Midground

• Foreground

You can use any design tool (like Canva or Photoshop) to do this.

The goal is simple: isolate parts of the image so they can move independently.

Step 2: Rebuild the image in Squarespace

Once your layers are ready:

1. Upload the background as a section background

2. Add image blocks for the midground and foreground

3. Stretch each layer to fill the section

4. Adjust positioning so everything lines up exactly

At this point, your design should look identical to the original image—just rebuilt in layers.

Step 3: Animate the foreground (depth starts here)

Open the SquareKicker Extension on your foreground image:

• Go to Advanced → Scroll Effects → Custom Timeline

Set up two key movements:

Vertical movement

Move the foreground slightly upward as the user scrolls

• Keep it subtle (e.g. around -5% to -10%)

Scale

Increase size slightly as it scrolls

• Around 110%–120% works well

This combination creates the illusion that the foreground is moving closer to the viewer.

Step 4: Animate the midground (parallax effect)

Now apply Scroll Effects to the midground layer.

Use the same Custom Timeline, but reverse the direction:

Vertical movement

Move it slightly downward (opposite to the foreground)

Scale

Add a smaller zoom effect than the foreground

• Keep it restrained (e.g. ~105%–110%)

This contrast between layers is what creates the parallax effect.

Small differences matter more than dramatic ones here.

Step 5: Understand the timeline (quick clarity)

The Custom Timeline is based on the viewport:

• 0% = top of the screen

• 100% = bottom of the screen

• The center marker shows when the element is centered in view

In a hero section, users can’t scroll “into” the section from above—so your animation effectively starts once the section is already visible.

That’s why it’s best to:

• Start animations just after the center point

• Focus on what happens during the visible scroll range

Once you understand this, the timeline becomes much easier to control.

Step 6: Add a heading that interacts with the scene

To push the effect further, add a text block.

Then apply Scroll Effects again:

• Horizontal movement (e.g. shifting to the right)

• Vertical movement (slightly downward)

• Optional scale for depth

Now reposition the text layer behind part of your image using the Squarespace layers tool (between the foreground and midground).

As the user scrolls, the text will move and disappear behind elements—creating a true layered effect rather than just floating on top.

Hint: Keep the motion controlled

It’s tempting to push these effects further—but this is where restraint matters.

Good parallax feels:

• Subtle

• Smooth

• Intentional

If the movement is too strong, it starts to feel distracting instead of polished.