How to Make Horizontal Scroll using Next.JS and Framer-Motion?

Thanks to Nextjs and other frameworks building a website becomes easy and simple.

Without writing all the code from the basics, you can build a website in a few hours.

If you use Next.js for building websites and want to add a Horizontal Scroll component then keep reading this blog post, today I will share an easy method using the framer-motion library you build the Horizontal Scroll component.

Before starting this tutorial first make sure you have downloaded the latest version of the framer-motion into your next.js project, run the below command to in the library.

sh

npm i framer-motion

1. Create the Section

First, you need to add the section that contains all the items that will be shown while scrolling.

export default function Page() {
  return (
    <main>
      <div className="bg-slate-600 text-slate-300 font-bold text-xl text-center py-12">
        SCROLL DOWN
      </div>
      <ScrollSection />
      <div className="bg-slate-600 text-slate-300 font-bold text-xl text-center py-12">
        SCROLL UP
      </div>
    </main>
  );
}

In the above code, I have added a <ScrollSection /> components in which I will add all the details that contain scroll items.

Also See: How to use Localstorage in Next.js 12 & 13 Above? 3 Method

2. Add Card Component in ScrollSection

In ScrollSection component you need to add all the items you want to show when the screen is scrolling.

To make the code more easy to read and accessible in the future I have created a new component name Card this component contains all the details that will shown while scrolling.

const ScrollSection = () => {
 
  return (
    <section className="relative h-[300vh] bg-neutral-900">
      <div className="sticky top-0 flex h-screen items-center overflow-hidden bg-slate-800 py-6">
        <div>
          <Card />
        </div>
      </div>
    </section>
  );
};

3. Map Details in Card Component

You can directly add the details into ScrollSection component but I like this method because it makes the code clean and easy to modify in the future.

In this card component, I will be mapping an array that contains all the details.

const names = [
  { name: "John", id: 1 },
  { name: "Alice", id: 2 },
  { name: "Bob", id: 3 },
  { name: "Emily", id: 4 },
  { name: "Michael", id: 5 },
  { name: "Sarah", id: 6 },
];

const Card = () => {
  return (
    <div className="flex items-center gap-4 overflow-hidden p-6">
      {names.map((item) => (
        <div
          key={item.id}
          className="p-36 bg-blue-500 rounded-lg text-2xl text-white"
        >
          {item.name}
        </div>
      ))}
    </div>
  );
};

Once you view the result in the browser it will look something like this.

At this moment you can use your cursor to scroll horizontally, but as you know we want the scroll effect when we scroll the screen, to do that we require to use framer-motion.

4. Add Framer-Motion for Animation

To add the Horizontal Scroll effect first we need to add a ref to the container so that we can trigger scroll animation while scrolling.

Import ref from react and store the ref into a variable.

Now add the ref to the main container of the ScrollSection component, as mentioned in the example below

"use client"
import { useRef } from "react";

const ScrollSection = () => {
  const targetRef = useRef(null);

  return (
    <section ref={targetRef} className="relative h-[300vh] bg-neutral-900">
//rest of the code
    </section>
  );
};

After adding the ref now need to use useScroll hook by framer motion to handle the Horizontal Scroll effect.

First import useScroll hook from framer-motion then destructure scrollYProgress from it

const { scrollYProgress } = useScroll({
    target: targetRef,
  });

To make the scroll effect work we need to do one more step and that is to use the useTransform hook to create a motion value for using it in the container.

To do that import useTransform from framer-motion and then pass scrollYProgress, [0, 1], ["1%", "-95%"].

const ScrollSection = () => {
  const targetRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: targetRef,
  });

  const x = useTransform(scrollYProgress, [0, 1], ["1%", "-95%"]);

  return (
    //rest of the code
  );
};

Finally, use the x value in the ScrollSection component to apply the Horizontal Scroll effect.

const ScrollSection = () => {
  const targetRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: targetRef,
  });

  const x = useTransform(scrollYProgress, [0, 1], ["1%", "-95%"]);

  return (
    <section ref={targetRef} className="relative h-[300vh] bg-neutral-900">
      <div className="sticky top-0 flex h-screen items-center overflow-hidden bg-slate-800 py-6">
        <motion.div style={{ x }}> //pass x in the style prop
          <Card />
        </motion.div>
      </div>
    </section>
  );
};

Save your project and preview the scroll effect in your browser.

And this is how you can Make a Horizontal Scroll using Next.JS and framer motion. You may also like to know How to add a Page Scroll Progress Bar in Next.js and Framer-motion and 10 Time Saver Tailwind CSS Class Name You much know.

Share this post with your developer friends to help them to build this amazing component.