Horizontal Smooth Scroll Layouts

Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.

If you use Locomotive Scroll, you might have heard about the new update that includes support for horizontal layouts. I’m a big fan of the library, so I couldn’t wait to try out some layouts and animations with the new feature.

The main concept behind these layouts is to play around with animations that feel and work well for scrolling to the sides. This includes animating images and text depending on the direction we scroll. Moving things up and down for example or skewing them can create a really interesting dynamic effect.

By using a structure of the images where an outer element has overflow: hidden and the inner one moves, we can create a cool parallaxed motion that adds depth to the whole layout.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

I really hope you enjoy these experiments and find them useful 🙂 Thank you for stopping by and let me know what you create with Locomotive Scroll @crnacura.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.