Parallax Sections — Build a native parallax scroll section

How to Create Parallax Scroll Sections in Framer - No Code

Most people think you need custom code to create a parallax scroll effect in Framer.

You don’t.

In this tutorial, I’ll show you how to build beautiful parallax sections using only Framer’s built-in scroll effects.

Introduction

Parallax scrolling is a popular technique that adds depth and motion to websites. It creates the illusion that background elements move at a different speed than the foreground while scrolling.

Let's Begin

Step 1: Creating the Section Layout

First, we need to create the structure for our parallax sections.

Start by adding a Frame under the Desktop layer.

Change the layout of this frame to Stack and rename it to Section.

Now configure the following settings:

• Width: Fill

• Height: 100vh

This ensures that each section always fills the entire viewport height.

Next, add another Frame inside the Section. This frame will contain the background image that moves during scrolling.

Set the frame size to:

• Width: 1fr

• Height: 1fr

Rename this frame to BG.

Now go to the Fill option in the style panel, switch it to Image, and choose the image you want to use.

At this point, your first parallax section is ready.

Now simply duplicate the Section frame as many times as you want to create multiple parallax sections on the page.

Each section will have its own background image and animation.

Step 2: Setting Up Scroll Sections

Next, we need to define Scroll Sections so Framer knows when each section enters the viewport.

Select the first Section frame.

In the right panel, scroll down until you find Scroll Section and enable it.

Rename it: section-1

Now select the second section and repeat the same step.

Rename it: section-2

Continue this pattern for the remaining sections:

• section-3

• section-4

• etc.

These names will be used as triggers for our scroll animation.

Step 3: Adding the Parallax Scroll Animation

Now we’ll animate the background image.

Select the BG frame inside the first section.

In the right panel, go to Effects and add: Scroll → Transform

Change the Trigger to: Section in View

Then configure the settings:

• Viewport: End

• Section: #section-1

Configure the “From” Animation

Open the From settings and apply the following values:

• Opacity → 1

• Scale → 1

• Rotate → 0

• Skew → 0

• OffsetX → 0

• OffsetY → -200

This makes the background image start slightly higher when the section enters the viewport.

Configure the “To” Animation

Now open the To settings and apply:

• Opacity → 1

• Scale → 1

• Rotate → 0

• Skew → 0

• OffsetX → 0

• OffsetY → 0

This returns the image to its original position as the section scrolls into view.

Creating the Exit Motion

To create a proper parallax effect, the image should continue moving when the next section appears.

Inside the Section in View settings, click Add Section.

Select: #section-2

Then open the To settings and configure:

• Opacity → 1

• Scale → 1

• OffsetX → 0

• OffsetY → 200

Now the background image moves downward when the next section enters the screen, creating a smooth parallax motion.

Step 4: Reusing the Animation for Other Sections

Instead of setting the animation manually for every section, you can simply copy the effect.

Select the BG frame inside the first section.

In the Effects panel, right-click on the Scroll Transform effect and choose Copy.

Next, select the BG frame inside the second section.

Right-click inside the Effects panel and choose Paste to apply the same animation.

Now update the section triggers.

Change the dropdown values from:

• #section-1 → #section-2

• #section-2 → #section-3

For the third section, repeat the same process:

Paste the effect on the BG frame, then update the triggers to:

• #section-2 → #section-3

• #section-3 → #section-4

Continue this pattern for all remaining sections.

This approach saves time because you only configure the animation once and reuse it across multiple sections.

Optional: Make the Scroll Even Smoother

If you want the scrolling to feel even smoother, you can add Lenis smooth scrolling to your canvas.

Simply drag the Lenis component into your project and place it under the Desktop layer.

That’s it - Lenis will automatically apply smooth scrolling to your page and enhance the overall parallax experience.

Final Result

Once everything is set up, your background images will move slightly upward and downward as users scroll between sections.

This creates a smooth parallax scrolling effect in Framer, built entirely with native tools.

Because it uses Framer’s built-in Scroll Transform system, the animation stays lightweight, flexible, and easy to maintain - with no custom code required.

Written by Soyeb