Resources

Horizontal Scroll in Framer

View demo

Remix project

Remix project

Resources

Horizontal Scroll in Framer

View demo

Remix project

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

Nandi

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.

Join waitlist

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.

Join waitlist

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.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Website interface showcasing Framer components and resources, with images of a camera, a room setup, and a book, intended to enhance design projects

    Cross-Section Scroll Animation in Framer

    Animation

    Website interface showcasing Framer components and resources, with images of a camera, a room setup, and a book, intended to enhance design projects

    Cross-Section Scroll Animation in Framer

    Animation

    Website interface showcasing Framer components and resources, with images of a camera, a room setup, and a book, intended to enhance design projects

    Cross-Section Scroll Animation in Framer

    Animation

  • Staggered grid of images under the title 'HALCYON' featuring a variety of stylish and modern interior designs, vehicles, and technology products

    Staggered Grid Scroll Animation in Framer

    Animation

    Staggered grid of images under the title 'HALCYON' featuring a variety of stylish and modern interior designs, vehicles, and technology products

    Staggered Grid Scroll Animation in Framer

    Animation

    Staggered grid of images under the title 'HALCYON' featuring a variety of stylish and modern interior designs, vehicles, and technology products

    Staggered Grid Scroll Animation in Framer

    Animation