Framer Stagger List

DEMO

CODE

<div class="demo-stage fsl-stage"><ul class="fsl-list"><li>Design</li><li>Develop</li><li>Deploy</li><li>Delight</li></ul></div>

.fsl-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.fsl-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; width:min(280px,80%); }
.fsl-list li { padding:.9rem 1.2rem; background:#1A1A1A; border:1px solid rgba(255,255,255,.07); border-radius:10px; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.1em; opacity:0; transform:translateX(-20px); animation:fsl .5s cubic-bezier(.16,1,.3,1) forwards; }
.fsl-list li:nth-child(1) { animation-delay:.1s; }
.fsl-list li:nth-child(2) { animation-delay:.22s; }
.fsl-list li:nth-child(3) { animation-delay:.34s; }
.fsl-list li:nth-child(4) { animation-delay:.46s; }
@keyframes fsl { to { opacity:1; transform:translateX(0); } }

ライブデモはFramer Motion不要のCSS等価版（animation-delayでstagger）。下がReact + Framer Motionの variants/staggerChildren 実装です。

import { motion } from "framer-motion"

const container = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } }
const item = { hidden: { opacity: 0, x: -20 }, show: { opacity: 1, x: 0 } }

export default function StaggerList() {
  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {["Design", "Develop", "Deploy", "Delight"].map((t) => (
        <motion.li key={t} variants={item}>{t}</motion.li>
      ))}
    </motion.ul>
  )
}

AI PROMPT

リスト項目が時間差で現れるstaggerをFramer Motionで作って。親に variants={container}、container.show.transition.staggerChildren=0.12 を設定し、各 <motion.li variants={item}> の item に hidden:{opacity:0,x:-20} と show:{opacity:1,x:0}。親の initial='hidden' animate='show' で子が0.12秒ずつ遅れて現れる。素のCSSなら nth-child ごとに animation-delay をずらす。メニュー・特徴リストの登場に。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。