react-framer-demo: A JavaScript repository from windsuzu

React Framer Demo

A simple demo PIZZA app showing the use of Framer Motion library.
View Demo · Report Bug · Request Feature

Table of Contents

About
Tutorial
Examples
License
Contact
Acknowledgements

About

這裡展示如何使用 framer-motion 讓網頁元件動起來。

在 Tutorial 你可以看到所有 framer-motion 的用法講解；在 Examples 你可以點擊 gif 動畫觀看對應的原始碼。

Built With

HTML5, CSS3, Javascript ES6
React.js
framer-motion
react-router-dom@v6

[DEMO] : https://windsuzu.github.io/react-framer-demo

Tutorial

1. Basic Animation

導入 motion 並將他插入想要動畫的元件名稱 (e.g. div => motion.div)
initial 設定動畫開始前的位置、屬性
animate 設定動畫開始後的位置、屬性
transition 設定延遲 (delay)、動畫類型 (type, 有 tween, spring, etc) 和其他動畫設定
- duration, stiffness, mass, damping,repeat, repeatType, when, ease, ...

import { motion } from "framer-motion";

<motion.div
    initial={{ y: -250 }}
    animate={{ y: -10 }}
    transition={{ delay: 0.3, type: "spring", stiffness: 120 }}>
    <h1>Pizza Joint</h1>
</motion.div>

2. Variants

使用 variants 包裝動畫可以讓 JSX 更乾淨。你可以在 variants 物件定義任何動畫，並且在 JSX component 上使用字串的方式呼叫動畫。

若是使用子元件 (child component) 使用的動畫 variants 的動畫命名一樣，可以省略不打。

const opacityVariants = {
    hidden: {
        opacity: 0,
    },
    visible: {
        opacity: 1,
        transition: { delay: 0.5, duration: 1 }
    },
};

<motion.div
    variants={opacityVariants}
    initial="hidden"
    animate="visible"
>
    // otherVariants also uses initial="hidden" and animate="visible"
    <motion.h1 variants={otherVariants}>Hello World</motion.h1>
</motion.div>

3. Hover Animation

我們可以用 whileHover 來觸發在 variants 定義好的動畫。

const btnHoverVariants = {
    hover: {
        scale: 1.1,
        ...
    },
};

<motion.button variants={btnHoverVariants} whileHover="hover">
    Create Your Pizza
</motion.button>

4. KeyFrames

只需要用陣列 (array) 設定屬性就可以讓動畫照順序執行。

const btnHoverVariants = {
    hover: {
        x: [0, 10, 0, 10, 0]
        scale: [1.5, 1, 1.5, 1, 1.5]
        ...
    },
};

5. Repeating Animation

在 transition 添加 repeat, repeatType 可以讓動畫重複執行指定的次數 (或無限次)。

const btnHoverVariants = {
    hover: {
        ...
        transition: {
            ...
            repeat: Infinity, // or number (1, 2, ...)
            repeatType: "reverse", // or mirror, loop (default)
        },
    },
};

6. Exit with AnimatePresence

要製作離開動畫必須要:

使用 <AnimatePresence> 包住要離開的 motion JSX component
設定 motion JSX component 的 exit 屬性
(Opt.) 可以添加 exitBeforeEnter 讓離開動畫先播放完再展示下一個動畫

const opacityVariants = {
    hidden: {
        opacity: 0,
    },
    ...
};

<AnimatePresence exitBeforeEnter>
    <motion.div variants={opacityVariants} exit="hidden">
        ...
    </motion.div>
</AnimatePresence>

7. React-Router-Dom v6 + AnimatePresence

我們可以搭配 react-router-dom@v6 的 Routes, useLocation 來和 AnimatePresence 實作頁面切換的動畫。

用 <AnimatePresence> 將 <Routes> 包起來
在 <Routes> 設定 location 跟 key
在要實作切換的頁面添加 exit

function App() {
    const location = useLocation();
    <AnimatePresence
        exitBeforeEnter
        onExitComplete={...} >
        <Routes location={location} key={location.pathname}>
            <Route path="/base" element={<Base />} />
        </Routes>
    </AnimatePresence>
}

function Base() {
    return (<motion.div ... exit="exit">...</motion.div>)
}

8. useCycle

我們可以用 useCycle 對單個物件切換多種動畫。

const variants = {
    popping: {
        ...
    },
    jumping: {
        ...
    },
};

const [animation, cycleAnimation] = useCycle("popping", "jumping");

<motion.p
    variants={variants}
    animate={animation}
    onClick={cycleAnimation}
></motion.p>

9. drag

添加 drag 就可以拖曳物件；添加 dragContrainsts 來限制物件的移動範圍；添加 dragElastic 控制拖曳的重量，小於 1 物件會變得更難拖曳。

<motion.svg
    ...
    drag
    dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
    dragElastic={1}
><motion.svg>

Examples

以下的 Examples 都是連結到 JSX components 的原始碼，對應的 variants 請參考: Animation Variants

SVG Animation	Repeating Animation

Exit with AnimatePresence	Fade-In

Hover Items	Animate Next Button

StaggerChildren	Show Modal

Exit Modal	Switch Animation with useCycle

drag