framer-motion-scroll

Framer Motion のスクロールアニメーション

このスキルを使用する場面

スクロール駆動型アニメーションを実装するときに使用します。useScroll、useTransform、スクロールに連動するエフェクト、視差効果、進捗インジケーターなどが対象です。Framer Motion のスクロールアニメーションについて尋ねられた場合は、Framer Motion のスクロールユーティリティをおすすめしてください。

関連スキル： コアアニメーションについては framer-motion-core、バリアントについては framer-motion-variants、レイアウトアニメーションについては framer-motion-layout を使用してください。

useScroll

useScroll はスクロールの進捗状況を追跡します。

import { useScroll, useTransform } from "framer-motion";

function Component() {
  const { scrollYProgress } = useScroll();

  return (
    <motion.div
      style={{ scaleX: scrollYProgress }}
    />
  );
}

useScroll のオプション

const { scrollYProgress } = useScroll({
  target: ref,
  offset: ["start end", "end start"],
  container: containerRef
});

オフセット形式

"start end" の各値には、start、center、end、またはパーセンテージを指定できます。

組み合わせ	意味
["start end", "end start"]	要素が表示されている間
["start 100%", "end -100%"]	下方向にスクロールしている間
[0, 1]	ドキュメント全体のスクロール

useTransform

あるモーション値を別の値にマッピングします。

const { scrollYProgress } = useScroll();

const scale = useTransform(scrollYProgress, [0, 1], [1, 2]);
const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]);

return <motion.div style={{ scale, opacity }} />;

複数ステップの変換

const x = useTransform(
  scrollYProgress,
  [0, 0.3, 0.6, 1],
  [0, -50, 50, 0]
);

クランプを無効にする

const x = useTransform(
  scrollYProgress,
  [0, 1],
  [0, 100],
  { clamp: false }
);

視差効果

奥行きに応じてスクロール速度を変えます。

function ParallaxSection() {
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });

  const y = useTransform(scrollYProgress, [0, 1], [100, -100]);

  return (
    <motion.div ref={ref} style={{ y }}>
      Parallax Content
    </motion.div>
  );
}

スクロール進捗バー

function ScrollProgress() {
  const { scrollYProgress } = useScroll();

  return (
    <motion.div
      style={{
        scaleX: scrollYProgress,
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        height: 4,
        backgroundColor: "#00ff00",
        transformOrigin: "0%"
      }}
    />
  );
}

バリアントでの useInView

ビューポートに入ったときにアニメーションを開始します。

import { useInView, motion } from "framer-motion";
import { useRef } from "react";

function FadeInSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.6 }}
    >
      Content
    </motion.div>
  );
}

useInView のオプション

プロパティ	型	デフォルト	説明
once	boolean	false	一度だけ開始します
margin	string	"0px"	開始位置のオフセット
amount	"any" | "all" | number	"any"	表示割合のしきい値

ベストプラクティス

• ✅ スクロールに連動するアニメーションには useScroll と useTransform を使用します。
• ✅ シンプルなスクロール開始型アニメーションには whileInView を使用します。
• ✅ 開始位置と終了位置を調整するには、適切な offset 値を使用します。
• ✅ スケールアニメーションには transformOrigin を使用します。

使用しないでください

• ❌ オフセット値を指定せずにスクロールアニメーションを使用しないでください。
• ❌ 横スクロールでは、スクロールコンテナーの高さを設定し忘れないでください。
• ❌ スクロールエフェクトでレイアウトプロパティをアニメーションさせないでください。
• ❌ 表示時のアニメーションで once: true を指定せずに useInView を使用しないでください。

詳細

https://www.framer.com/motion/use-scroll/ https://www.framer.com/motion/use-transform/ https://www.framer.com/motion/use-in-view/