Lift card on hover 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 LiftCard = React.forwardRef<HTMLDivElement, {
  styles: React.CSSProperties,
  custom: {
    src: string; // src of the background image
    initialTop: number; // initial value of the top CSS property
    finalTop: number: // value of the top CSS property on hover
  }
}
>((props, ref)=>{
 ...
});

Steps

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

https://user-images.githubusercontent.com/30747788/236547242-5f4e483b-c1e4-4221-8b60-5b4fb8c87a58.mov

[sumitshinde-84]

I would like to work on this issue. Currently, I am working on a project where I am using GSAP and Framer Motion.

[cruxcode]

@sumitshinde-84 your project looks awesome. Please go ahead and work on this issue. You can join our Slack channel if you need help understanding our framework.

Also, I would love to know which animations are done using GSAP in your project.

[sumitshinde-84]

Thank you for your kind words and encouragement! I'm glad to hear that you find my project impressive. Yes, almost all of the animations in my project were done using GSAP. I will definitely join your Slack channel if I need any help understanding your framework. Thank you for the invitation!