iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 3119 瀏覽

鐵人賽自我挑戰組 DAY 1

向網頁施點魔法粉 framer-motion 系列第 1 篇

技術 #01 Who & Why framer-motion ?

目錄從坐著到行動選擇動畫相關為主題什麼是 framer motion ? 為什麼選 framer motion ? 先備知識規劃從坐著到行動 H...

Rosa ‧ 2022-09-14

0 Like 0 留言 1901 瀏覽

鐵人賽自我挑戰組 DAY 2

向網頁施點魔法粉 framer-motion 系列第 2 篇

技術 #02 Dancing with Animation and Transition

以能夠做到 CSS 基本的動畫操作為切入點，初步了解 framer motion。目錄安裝環境 Magic Is Happening ! 躍上五線譜 :...

Rosa ‧ 2022-09-15

0 Like 0 留言 1198 瀏覽

鐵人賽 Modern Web DAY 28

產品設計師的 Chakra UI & framer-motion 實作筆記系列第 28 篇

技術 framer-motion: useScroll、useSpring

framer-motion v7 版本做了不少幅度的更新，包含移除了 useViewportScroll 新增了 useScroll。改用 useScroll...

indexhui ‧ 2022-10-11 ‧團隊桌遊玩樂團

0 Like 0 留言 1196 瀏覽

鐵人賽自我挑戰組 DAY 3

向網頁施點魔法粉 framer-motion 系列第 3 篇

技術 #03 Put your Gestures up - Hover, Focus & Tap

上篇講完了基本組成動畫的 props ，透過三種 animate 、 initial 以及 transition 可以交織出不同的動畫組合，這些動畫都是網頁載...

Rosa ‧ 2022-09-16

0 Like 0 留言 1192 瀏覽

鐵人賽 Modern Web DAY 23

產品設計師的 Chakra UI & framer-motion 實作筆記系列第 23 篇

技術 Chakra UI：動畫就搭配Framer motion吧

在前端開發也不乏前端動畫的任務，因為在使用 Chakra UI 使用 style props 做開發。如果還是像過去一樣實做動畫是靠 css animation...

indexhui ‧ 2022-10-06 ‧團隊桌遊玩樂團

0 Like 0 留言 1050 瀏覽

鐵人賽 Modern Web DAY 29

產品設計師的 Chakra UI & framer-motion 實作筆記系列第 29 篇

技術 framer-motion: useScroll、Element scroll、Element position

上一篇提到 useScroll 預設為 Page scroll今天來看看 Element scroll、Element position Element scr...

indexhui ‧ 2022-10-12 ‧團隊桌遊玩樂團

0 Like 0 留言 1015 瀏覽

鐵人賽自我挑戰組 DAY 9

向網頁施點魔法粉 framer-motion 系列第 9 篇

技術 #09 Bye Bye Bye ! AnimatePresence Component

<AnimatePresence> 是使用在元件 unmount 時的離場動畫，在 React 的生命週期裡 unmount 就直接從畫面上消失了...

Rosa ‧ 2022-09-22

0 Like 0 留言 988 瀏覽

鐵人賽自我挑戰組 DAY 10

向網頁施點魔法粉 framer-motion 系列第 10 篇

技術 #10 Ok,Bye... AnimatePresence Page Transition

上一篇使用 <AnimatePresence> 都是直接底下包裹 motion 元件，實際上我們更常把元件打包起來成客製化元件 (<Ite...

Rosa ‧ 2022-09-23

0 Like 0 留言 960 瀏覽

鐵人賽自我挑戰組 DAY 8

向網頁施點魔法粉 framer-motion 系列第 8 篇

技術 #08 Everything in ... transition type

在第二天的時候有提到 transition 除了預設的 spring 彈簧效果，還有其他的種類，並且不同種類對應不同的設定數值，今天來認識這些值。除了 twee...

Rosa ‧ 2022-09-21

0 Like 0 留言 906 瀏覽

鐵人賽自我挑戰組 DAY 15

向網頁施點魔法粉 framer-motion 系列第 15 篇

技術 #15 Bump in to you - useScroll & useInView

useScroll 的動畫很常使用，在之前的 Gestures 篇章只有 whileInView 來處理當滑動看到目標物並啟動動畫，但有時候我們會持續性地觸發...

Rosa ‧ 2022-09-28

0 Like 0 留言 874 瀏覽

鐵人賽自我挑戰組 DAY 4

向網頁施點魔法粉 framer-motion 系列第 4 篇

技術 #04 Put your Gestures up II - Pan, whileDrag, whileInView

上篇只介紹到最基本的使用者互動操作，本篇的 Pan 、 whileDrag 具有持續的互動性，在過程中能依照更細節的偏移量 (offset)、速度 (velo...

Rosa ‧ 2022-09-17

0 Like 0 留言 838 瀏覽

鐵人賽自我挑戰組 DAY 5

向網頁施點魔法粉 framer-motion 系列第 5 篇

技術 #05 Kage Bunshin no Jutsu - Variants

Variants 可以讓元件以字串的方式帶入動畫，同時可以把相同的動畫抽出來，可以說是動畫的影分身之術，此外還有傳播的功能，可以使子元件相同 key 的動畫一...

Rosa ‧ 2022-09-18

0 Like 0 留言 765 瀏覽

鐵人賽自我挑戰組 DAY 6

向網頁施點魔法粉 framer-motion 系列第 6 篇

技術 #06 Magic ! layout props

華麗的特效很炫沒錯，但往往伴隨著效能卡頓的問題 QQ。在網頁完整渲染的過程，會經過一系列的步驟，直到讓使用者看見畫面，光是改變元素大小，就會使流程在走一遍，...

Rosa ‧ 2022-09-19

0 Like 0 留言 727 瀏覽

鐵人賽自我挑戰組 DAY 14

向網頁施點魔法粉 framer-motion 系列第 14 篇

技術 #14 Move & Bounce Again - useTranfrom & useSpring

前一篇有提到 motion value 是可以搭配 useTransform 串聯多個值一起用的，可以根據一個/組數值產生一連串新的 motion value，...

Rosa ‧ 2022-09-27

0 Like 0 留言 700 瀏覽

鐵人賽 Modern Web DAY 26

產品設計師的 Chakra UI & framer-motion 實作筆記系列第 26 篇

技術 framer motion: Reveal 效果 Animating gradients

一般來說 CSS 無法對漸層產生動畫效果，而在 framer-motion 更新後官方文件有特別介紹漸層的動畫效果是可以實現的。我們可以用此特性來製作**百頁...

indexhui ‧ 2022-10-09 ‧團隊桌遊玩樂團

0 Like 0 留言 681 瀏覽

鐵人賽自我挑戰組 DAY 7

向網頁施點魔法粉 framer-motion 系列第 7 篇

技術 #07 Magic is happening again - layout type & layoutGroup

目錄腰間骨會痛記得要用 : layout 的其他種類共享朋友 : layoutId 兄弟會 : LayoutGroup Component 本節...

Rosa ‧ 2022-09-20

0 Like 0 留言 654 瀏覽

鐵人賽自我挑戰組 DAY 12

向網頁施點魔法粉 framer-motion 系列第 12 篇

技術 #12 Point and Line to Plane - SVG Animation

SVG 動畫很常在一些使用者互動上看到，例如 Navbar 上的小漢堡。而在 motion API SVG 也可以變成 motion.path、motion.c...

Rosa ‧ 2022-09-25

0 Like 0 留言 646 瀏覽

鐵人賽自我挑戰組 DAY 11

向網頁施點魔法粉 framer-motion 系列第 11 篇

技術 #11 Line up ! Reorder Component

今天要講另一個很常用的 motion Component ─ <Reorder>，專門用來操作元件排序動畫，以後在做 todolist 除了新增予...

Rosa ‧ 2022-09-24

0 Like 0 留言 644 瀏覽

鐵人賽自我挑戰組 DAY 13

向網頁施點魔法粉 framer-motion 系列第 13 篇

技術 #13 The New Style - useMotionValue & useMotionTemplate

motion 元件都會使用到 Motion value，主要用來訂閱 (subscribe) 動畫或運動狀態的值，一般來說 motion 元件自動會建立這些值...

Rosa ‧ 2022-09-26

0 Like 0 留言 529 瀏覽

鐵人賽 Modern Web DAY 25

產品設計師的 Chakra UI & framer-motion 實作筆記系列第 25 篇

技術 Charkra+ framer motion: Reveal component 進階

上一篇製作 Reveal component 主要是利用了 framer-motion API 中的 motoin 與 scroll。接著本篇透過 vari...

indexhui ‧ 2022-10-08 ‧團隊桌遊玩樂團

0 Like 0 留言 109 瀏覽

鐵人賽 JavaScript DAY 16

從PM到前端開發：我的React作品集之旅系列第 16 篇

技術 Day 16 : 打造高互動 Hero Section，運用 Framer Motion 和 i18n

在前兩篇文章中，我們深入探討了如何設計一個靈活、高效的 React 按鈕元件，還有助於在不同情境下保持一致的設計風格。今天，我們將這些按鈕設計應用到 Hero...

carolcheng ‧ 2024-09-16