Marquee

[kevinpauljacob]

[kevinpauljacob]

Left Side should go up and right side show go down.
Marquee is a moving component often used in Sponsors sections.

[kevinpauljacob]

const partners = [
{ name: 'Marquee Item 1' },
{ name: 'Marquee Item 2' },
{ name: 'Marquee Item 3' },
{ name: 'Marquee Item 4' },
{ name: 'Marquee Item 5' },
]

const Marquee = () => {
return (

supported by

{partners.map((partner, index) => (
{partner.name}
))}

{partners.map((partner, index) => (
{partner.name}
))}

)
}

export default Marquee

[kevinpauljacob]

The above code can be used to create the marquee component. It uses an animation that is defined in tailwind.config file.

[kevinpauljacob]

  animation: {
    marquee: 'marquee 25s linear infinite',
    marquee2: 'marquee2 25s linear infinite',
  },
  keyframes: {
    marquee: {
      '0%': { transform: 'translateX(0%)' },
      '100%': { transform: 'translateX(-100%)' },
    },
    marquee2: {
      '0%': { transform: 'translateX(100%)' },
      '100%': { transform: 'translateX(0%)' },
    },
  },