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

  • Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation