Framer Motion Layout

C-Jeril/framer-motion-skills/skills/framer-motion-layout

作者 C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫6 個月前更新

Official Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.

僅含說明Software Development

AI 產生的概覽

Framer Motion 版面動畫參考指南：layout 屬性、layoutId 共享轉場、AnimatePresence 與退出動畫。

功能: 這個技能是一份在 React 中實作 Framer Motion 版面動畫的說明性參考。它說明 layout 屬性及其模式、用於頁面切換與模態浮層等共享元素轉場的 layoutId、用於退出動畫的 AnimatePresence 模式、可拖曳排序的清單，以及格狀版面。它提供程式碼範例與最佳實務和常見錯誤清單，而非指令碼或產生的檔案。
適用情境: 適用於在 React 介面中建構共享元素轉場、版面動畫、可排序清單，或協調的掛載與卸載動畫。也適合回答關於 Framer Motion 的 layout 屬性、layoutId 或 AnimatePresence 的問題。
執行需求: 這個技能不附帶指令碼或資源，僅為說明文件。使用它需要已安裝 framer-motion 套件的 React 專案。文件中包含指向 Framer 外部文件頁面的連結。

Framer Motion Layout Animations

When to Use This Skill

Apply when implementing shared element transitions, layout animations for reordering, or coordinated mount/unmount animations. When the user asks about Framer Motion layout animations, layoutId, or AnimatePresence.

Related skills: For core animation use framer-motion-core; for variants use framer-motion-variants; for React integration use framer-motion-react.

Layout Prop

The layout prop enables automatic position animations when layout changes:

Layout Modes

layoutId for Shared Element Transitions

layoutId enables smooth transitions between elements in different components:

Page Transitions

jsx

// Page Afunction CardA() {  return <motion.div layoutId="card" />;}
// Page Bfunction CardB() {  return <motion.div layoutId="card" />;}

// Page Afunction CardA() {  return <motion.div layoutId="card" />;}
// Page Bfunction CardB() {  return <motion.div layoutId="card" />;}

When CardA unmounts and CardB mounts with the same layoutId, Framer Motion animates the element smoothly between positions.

Modal Overlays

jsx

function ListItem({ item, onClick }) {  return (    <motion.div layoutId={`item-${item.id}`} onClick={onClick}>      {item.name}    </motion.div>  );}
function Modal({ item }) {  return (    <motion.div layoutId={`item-${item.id}`}>      <h2>{item.name}</h2>      <p>{item.description}</p>    </motion.div>  );}

function ListItem({ item, onClick }) {  return (    <motion.div layoutId={`item-${item.id}`} onClick={onClick}>      {item.name}    </motion.div>  );}
function Modal({ item }) {  return (    <motion.div layoutId={`item-${item.id}`}>      <h2>{item.name}</h2>      <p>{item.description}</p>    </motion.div>  );}

AnimatePresence for Layout

AnimatePresence enables exit animations:

jsx

import { AnimatePresence, motion } from "framer-motion";
function TodoList({ todos }) {  return (    <motion.ul>      <AnimatePresence>        {todos.map(todo => (          <motion.li            key={todo.id}            layout            initial={{ opacity: 0, x: -20 }}            animate={{ opacity: 1, x: 0 }}            exit={{ opacity: 0, x: 20 }}          />        ))}      </AnimatePresence>    </motion.ul>  );}

import { AnimatePresence, motion } from "framer-motion";
function TodoList({ todos }) {  return (    <motion.ul>      <AnimatePresence>        {todos.map(todo => (          <motion.li            key={todo.id}            layout            initial={{ opacity: 0, x: -20 }}            animate={{ opacity: 1, x: 0 }}            exit={{ opacity: 0, x: 20 }}          />        ))}      </AnimatePresence>    </motion.ul>  );}

AnimatePresence Modes

Reorderable Lists

Combine layout with drag for reorderable lists:

jsx

function ReorderableList({ items, setItems }) {  return (    <AnimatePresence>      {items.map(item => (        <motion.div          key={item.id}          layout          drag          dragConstraints={{ top: 0, bottom: 0 }}          onDragEnd={({ info, target }) => {            // Calculate new index and update          }}          initial={{ opacity: 0, scale: 0.8 }}          animate={{ opacity: 1, scale: 1 }}          exit={{ opacity: 0, scale: 0.8 }}        />      ))}    </AnimatePresence>  );}

function ReorderableList({ items, setItems }) {  return (    <AnimatePresence>      {items.map(item => (        <motion.div          key={item.id}          layout          drag          dragConstraints={{ top: 0, bottom: 0 }}          onDragEnd={({ info, target }) => {            // Calculate new index and update          }}          initial={{ opacity: 0, scale: 0.8 }}          animate={{ opacity: 1, scale: 1 }}          exit={{ opacity: 0, scale: 0.8 }}        />      ))}    </AnimatePresence>  );}

Shared Layout with Grid

jsx

function Grid({ items }) {  return (    <motion.div      layout      style={{        display: "grid",        gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",        gap: 10      }}    >      {items.map(item => (        <motion.div          key={item.id}          layout          style={{            width: "100%",            aspectRatio: 1,            backgroundColor: item.color          }}        />      ))}    </motion.div>  );}

function Grid({ items }) {  return (    <motion.div      layout      style={{        display: "grid",        gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",        gap: 10      }}    >      {items.map(item => (        <motion.div          key={item.id}          layout          style={{            width: "100%",            aspectRatio: 1,            backgroundColor: item.color          }}        />      ))}    </motion.div>  );}

Exit Animations

Elements must have exit states for AnimatePresence:

jsx

<motion.div  initial={{ opacity: 0, scale: 0 }}  animate={{ opacity: 1, scale: 1 }}  exit={{ opacity: 0, scale: 0 }}/>

<motion.div  initial={{ opacity: 0, scale: 0 }}  animate={{ opacity: 1, scale: 1 }}  exit={{ opacity: 0, scale: 0 }}/>

Exit with layout

Crossfade with layoutId

When multiple elements share a layoutId at the same level:

jsx

function Toggle() {  const [showA, setShowA] = useState(true);
  return (    <AnimatePresence mode="popLayout">      {showA ? (        <motion.div          key="a"          layoutId="shape"          style={{ backgroundColor: "red" }}        />      ) : (        <motion.div          key="b"          layoutId="shape"          style={{ backgroundColor: "blue", borderRadius: "50%" }}        />      )}    </AnimatePresence>  );}

function Toggle() {  const [showA, setShowA] = useState(true);
  return (    <AnimatePresence mode="popLayout">      {showA ? (        <motion.div          key="a"          layoutId="shape"          style={{ backgroundColor: "red" }}        />      ) : (        <motion.div          key="b"          layoutId="shape"          style={{ backgroundColor: "blue", borderRadius: "50%" }}        />      )}    </AnimatePresence>  );}

The element smoothly morphs between states including border radius.

Best practices

✅ Use layoutId for shared element transitions between routes/pages.
✅ Wrap animated lists with AnimatePresence for exit animations.
✅ Use layout prop for automatic position animations.
✅ Use AnimatePresence mode="popLayout" for smooth reordering.
✅ Define exit states for components using AnimatePresence.
✅ Use layout on parent containers when children need to animate position.

Do Not

❌ Forget to wrap conditionally rendered animated components with AnimatePresence.
❌ Use the same layoutId on multiple elements at the same level.
❌ Forget to define exit states for components that unmount.
❌ Use layout animations without proper keys on children.
❌ Animate too many layout elements simultaneously — group or stagger.

Learn More

https://www.framer.com/motion/layout-animations/ https://www.framer.com/motion/animate-presence/

來源與署名

來源：C-Jeril/framer-motion-skills位於skills/framer-motion-layout提交837d726

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Mode	Behavior
`true`	Animate position and size
`"position"`	Animate only position
`"size"`	Animate only size

Mode	Description
`"sync"`	All animations run simultaneously (default)
`"wait"`	Exit completes before enter starts
`"popLayout"`	Exiting element removed from layout immediately

Framer Motion Layout

Framer Motion Layout Animations

When to Use This Skill

Layout Prop

Layout Modes

layoutId for Shared Element Transitions

Page Transitions

Modal Overlays

AnimatePresence for Layout

AnimatePresence Modes

Reorderable Lists

Shared Layout with Grid

Exit Animations

Exit with layout

Crossfade with layoutId

Best practices

Do Not

Learn More

來源與署名

更多來自 C-Jeril/framer-motion-skills 的技能

Framer Motion Variants

Framer Motion Scroll

Framer Motion Gestures

Framer Motion React

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices