profile picture of Olivier Larose

Olivier Larose

December 30, 2023

/

Intermediate

/

Medium

Horizontal Scroll

How to Make a Horizontal Scroll with GSAP and React

A Horizontal scroll with a vertical pinned section, made with React, GSAP and Next.js. Pictures by George Marazakis.

Live Demo
background video

It seems you don’t have access to this tutorial.

This tutorial is part of the Web Animation Course.

Learn more

Related Animations

image

June 2, 2024

Mask Section Transition

A website tutorial featuring a scroll animation using an SVG Mask to create a section transition, made with React, Framer Motion. Inspired by: https://axelvanhessche.com/. Pictures by Eric Asamoah, Inka and Niclas Lindergård, Daniel Ribar

image

May 25, 2024

Background Image Parallax

A website animation featuring a background image moving on scroll in a parallax motion, made with Framer Motion and React, inside a Next.js app. Inspired by: https://inkfishnyc.com/. Pictures by Matthias Leidinger

image

May 25, 2024

Text Parallax

A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app