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

  • Animated stripes title with grayscale gradient background effect

    Scroll Animated Stripes in Framer

    Animation

    Animated stripes title with grayscale gradient background effect

    Scroll Animated Stripes in Framer

    Animation

    Animated stripes title with grayscale gradient background effect

    Scroll Animated Stripes in Framer

    Animation

  • Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

    Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

    Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation