Infinite marquee using framer motion

[cruxcode]

Create a component that has the animation as shown in the clip attached with this description. You will have to learn two things -

1. How to create a component? - Find details here
2. What is the best way to create an animation component that is reusable? - Find details here

The React component signature

const InfMarquee = React.forwardRef<HTMLDivElement, {
  styles: React.CSSProperties,
  custom: {
    src: string; // src of the background image
    initialSize: string; // initial size of the background (string because 50% 50%)
    hoverSize: string: // size of the background when hovered
  }
}
>((props, ref)=>{
 ...
});

Steps

1. Create a new project - follow docs here
2. Create the custom component - follow this article
3. Add a file called InfMarquee.md in made-with-atri folder and write your GitHub repo name in the file. Make sure the GitHub repo is public.

Screen.Recording.2023-05-05.at.12.02.03.PM.mov

[lokeshvasnik]

I would like to work on this

[alceil]

Can i work on this @cruxcode

[saka015]

i want to work on it