How to Create a Brand Logo Ticker Animation Using React and Framer Motion

In this tutorial, we will create a smooth and continuous brand logo ticker animation using React and Framer Motion. This animation will display a list of brand names scrolling horizontally across the screen.

Prerequisites

Before we begin, ensure you have the following installed:

• Node.js and npm

• A React application set-up (you can use Create React App for this)

• Framer Motion library

Step 1: Install Framer Motion

First, you need to install the Framer Motion library in your React project. Run the following command in your project directory:

bashCopy
npm install framer-motion

Step 2: Create the Slider Component

Create a new component file named SliderTest.js And add the following code:

javascriptCopy
import React from 'react';
import { motion } from 'framer-motion';
import '../App.css';

function SliderTest() {
    const brandName = ["Google", "Facebook", "Amazon", "Microsoft", "Apple", "Netflix", "Tesla", "Twitter", "Instagram", "Linkedin"];
    const otherBrandName = ["Behance", "Dribble", "Figma", "Slack", "Spotify", "Twitch", "Whatsapp", "Zoom", "Youtube"];

    return (
        <>
            <div className='container mx-auto'>
                <div className='flex gap-3 scrollGradient'>
                    <motion.div initial={{x:0}} animate={{x:"-100%"}} transition={{duration:20, repeat:Infinity, ease:"linear", delay:0}} className='flex space-x-16 text-6xl font-semibold font-Orbitron flex-shrink-0'>
                        {brandName.map((brand, index) => (
                            <div key={index}>
                                {brand}
                            </div>
                        ))}
                    </motion.div>
                    <motion.div initial={{x:0}} animate={{x:"-100%"}} transition={{duration:20, repeat:Infinity, ease:"linear", delay:0}} className='flex space-x-16 text-6xl font-semibold font-Orbitron flex-shrink-0'>
                        {brandName.map((brand, index) => (
                            <div key={index}>
                                {brand}
                            </div>
                        ))}
                    </motion.div>
                </div>
            </div>
        </>
    );
}

export default SliderTest;

Step 3. Create a gradient mask effect in CSS

cssCopy
.scrollGradient{
  mask-image:linear-gradient(to right, 
  rgba(0,0,0,0),
  rgba(0,0,0,1) 20%,
  rgba(0,0,0,1) 80%,
  rgba(0,0,0,0)
)}

Step 4: Use the Component

Finally, import and use the SliderTest component in your main application file, typically App.js:

javascriptCopy
import React from 'react';
import SliderTest from './components/SliderTest';

function App() {
    return (
        <div className="App">
            <SliderTest />
        </div>
    );
}

export default App;

Conclusion

By following these steps, you have successfully created a brand logo ticker animation using React and Framer Motion.

You can further customize the animation duration, easing, and styles to fit your design needs. This component can be a great addition to any website looking to showcase brand partnerships or sponsors dynamically.