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

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

技術 framer-motion: useScroll、useSpring

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

技術 framer motion: Reveal 效果 Animating gradients

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

技術 Charkra+ framer motion: Reveal component 進階

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

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

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

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

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

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

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

技術 #13 The New Style - useMotionValue & useMotionTemplate

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

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

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

技術 #11 Line up ! Reorder Component

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

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

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

技術 #09 Bye Bye Bye ! AnimatePresence Component

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

技術 #08 Everything in ... transition type

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

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

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

技術 #06 Magic ! layout props

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

技術 #05 Kage Bunshin no Jutsu - Variants

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

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

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

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

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

技術 #02 Dancing with Animation and Transition

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

技術 #01 Who & Why framer-motion ?

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