Scribd
Upload
28 views1 page

Animated Card Component in React

The document defines an 'AnimatedCard' React component that utilizes motion effects to animate a card based on a progress value. It accepts various props including image source, link, and offset values for animation transformations. The component uses the 'motion' library for animations and 'clsx' for conditional class names.

Uploaded by

t2k20802
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
28 views1 page

Animated Card Component in React

The document defines an 'AnimatedCard' React component that utilizes motion effects to animate a card based on a progress value. It accepts various props including image source, link, and offset values for animation transformations. The component uses the 'motion' library for animations and 'clsx' for conditional class names.

Uploaded by

t2k20802
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import { useTransform, MotionValue } from "motion/react";

import { StaticImageData } from "next/image";


import * as m from "motion/react-m";
import clsx from "clsx";
import { Link } from "@/utils/Link";
import { Card } from "./Card";

export type HeroOffset = {


x: number;
y: number;
rot: number;
s: number;
dx?: number; // fine-tune X
dy?: number; // fine-tune Y
};

export function AnimatedCard({


src,
href,
alt,
offset,
color,
type,
"data-grid-id": gridId,
reveal,
progress,
}: {
src: StaticImageData;
href?: string;
alt: string;
offset: HeroOffset;
color: string;
"data-grid-id": string;
type: string;
isMobile: boolean;
reveal: boolean;
progress: MotionValue<number>;
}) {
const x = useTransform(progress, [0, 1], [0, offset.x]);
const y = useTransform(progress, [0, 1], [0, offset.y]);
const scale = useTransform(progress, [0, 1], [1, offset.s]);
const rotate = useTransform(progress, [0, 1], [0, [Link]]);

return (
<Link href={href || "/projects"} data-grid-id={gridId}>
<[Link]
style={{ x, y, scale, rotate, willChange: "transform" }}
className={clsx(
"group relative h-full w-full",
reveal && "hover-target [&_span]:opacity-0"
)}
// data-text={!reveal ? "View Project" : null}
>
<Card src={src} alt={alt} color={color} type={type} />
</[Link]>
</Link>
);
}

You might also like