How to Create a Marquee with Framer Motion and React

In this tutorial, we'll walk through creating a smooth, continuous marquee using React and Framer Motion. We'll also use the package to make our marquee responsive. By the end of this tutorial, you'll have a reusable Marquee component that you can integrate into your projects.

Prerequisites

• Basic knowledge of React
• Familiarity with Framer Motion
• A React project set up

Step 1: Install Dependencies

First, ensure you have the necessary packages installed. Run the following command to install Framer Motion and the window size hook:

Step 2: Create the Marquee Component

Create a new file named in your components directory. This component will handle the marquee animation and responsiveness.

Explanation

• useRef: To reference the marquee container.
• useWindowSize: To get the current window size and update the marquee width accordingly.
• useEffect: To set the marquee width whenever the window size changes.
• motion.div: To create the animated container using Framer Motion.
• duplicateChildren: To create a seamless loop by duplicating the children elements.

Step 3: Create the ImageMarquee Component

Now, let's create a component to showcase our Marquee in action. Create a new file named in your sections directory.

Explanation

• SectionWrapper: A wrapper component to style the section.
• Marquee: Our custom Marquee component.
• Image: Next.js Image component to display images.

Step 4: Integrate and Test

Import and use the component in your main application file or any other component to see it in action.

Conclusion

You've now created a responsive Marquee component using React and Framer Motion. This component can be customized further to fit your needs, such as adjusting the speed, gap, or content. You can use any sort of content you please, such as images or text sort of like a Spotify or Apple Music side-scrolling text.