📑

【Web Library】Nextjs13で覚える便利なライブラリ【#３Flamer Motion】

2023/02/25に公開

Next.js

tech

【#３Flamer Motion】

YouTube: https://youtu.be/p6PXWRK6xi0

https://youtu.be/p6PXWRK6xi0

今回は「Flamer Motion」を使用して、
カードのスケルトンにアニメーションを設定します。

https://www.framer.com/motion/

npm i framer-motion

  "dependencies": {
    "framer-motion": "10.0.0",
  },

ドキュメントを見ると初歩的なものから
上級者向けまでのサンプルがあるのですが、
今回はスクロールで発火するアニメーションで実装を行います。

「Nextjs13」ではサーバー用のコンポーネントと
クライアント用のコンポーネントを区別する必要があり、
クライアント用のコンポーネントには「'use client'」を記述する必要があります。

ui/SkeletonCard.tsx

'use client';
import clsx from 'clsx';
import { motion } from 'framer-motion';

export const SkeletonCard = ({ isLoading }: { isLoading?: boolean }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0, transition: { duration: 1 } }}
    viewport={{ once: true }}
  >
    <div
      className={clsx('rounded-2xl bg-zinc-900/80 p-4', {
        'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent':
          isLoading,
      })}
    >
      <div className="space-y-3">
        <div className="h-14 rounded-lg bg-zinc-700" />
        <div className="h-3 w-11/12 rounded-lg bg-zinc-700" />
        <div className="h-3 w-8/12 rounded-lg bg-zinc-700" />
      </div>
    </div>
  </motion.div>
);

【#３Flamer Motion】

Discussion