複数要素を順番にフェードインさせるアニメーション
スクロールして要素が表示範囲に入るとアニメーションが発火します
目次
About Preview
このコンポーネントを使いたい場合は、component.tsxの内容をコピーして、render.tsxを参考にコンポーネントを使ってください
Default Packages
プレビュー画面では以下のパッケージがデフォルトでインストールされています
- TailwindCSS
- framer-motion
pnpm add tailwindcss framer-motion
Component PropsType
CardWrapper Props
interface CardWrapperProps {
className?: string;
children?: ReactNode;
}
Card Props
interface CardProps {
className?: string;
children?: ReactNode;
}
使用例
CardをCardWrapperで包んで使ってください。
const App = () => {
return (
<div className="w-[100vw] min-h-[100vh] p-5 flex justify-center items-center">
<CardWrapper className="grid grid-cols-2 sm:grid-cols-3 gap-3">
<Card className="w-[120px] h-[120px] bg-gray-200 rounded-md">
<h3>Hello</h3>
</Card>
<Card className="w-[120px] h-[120px] bg-gray-200 rounded-md">
<h3>World</h3>
</Card>
<Card className="w-[120px] h-[120px] bg-gray-200 rounded-md">
<h3>!!</h3>
</Card>
</CardWrapper>
</div>
);
};
