Horizontal Scroll in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

Horizontal Scroll in Framer

This is a demo website that shows how you should structure your Framer site if you want to implement a horizontal scrolling section. Feel free to remix the project and dive deep.

image of Nandi Muzsik

Created by

Horizontal Scroll in Framer
Horizontal Scroll in Framer
Horizontal Scroll in Framer

About the resource

When we're looking to create horizontal scrolling sections in Framer, we typically utilize the following features:

  • Sticky positioning.

  • Scroll transform.

The trick is to use sticky positioning to keep a section visible. As we scroll down the website, it stays in our viewport and, with scroll-based transforms, we start to offset the content within this sticky section. That's what gives us a horizontal scrolling effect.

About the resource

When we're looking to create horizontal scrolling sections in Framer, we typically utilize the following features:

  • Sticky positioning.

  • Scroll transform.

The trick is to use sticky positioning to keep a section visible. As we scroll down the website, it stays in our viewport and, with scroll-based transforms, we start to offset the content within this sticky section. That's what gives us a horizontal scrolling effect.

About the resource

When we're looking to create horizontal scrolling sections in Framer, we typically utilize the following features:

  • Sticky positioning.

  • Scroll transform.

The trick is to use sticky positioning to keep a section visible. As we scroll down the website, it stays in our viewport and, with scroll-based transforms, we start to offset the content within this sticky section. That's what gives us a horizontal scrolling effect.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation