G07▸V104▸gsap
Logo Reveal
Logo 揭示
難度 ★★★★★標籤 logo · svg · path · brand2 min read
效果簡述
Logo 路徑先「畫出來」，然後填色淡入。品牌站 hero 開場很經典。 關鍵是先 stroke draw、再 fade in fill。
Claude Code Prompt
參考：V104 logo reveal
技術：SVG path draw + fill fade in（timeline 串）
具體行為:
- 取所有 path，逐一 set strokeDasharray/Offset = len，fillOpacity 0
- tl.to(paths, { strokeDashoffset: 0, stagger: 0.1 })
- tl.to(paths, { fillOpacity: 1 }, '-=0.3')
限制：
- 路徑數量 < 10 比較自然
- 每條 path 都要可 stroke
- SVG 載入後才能 getTotalLength，記得在 useEffect 跑完整程式碼
'use client'
import gsap from 'gsap'
import { useEffect, useRef } from 'react'
export function LogoReveal() {
const root = useRef<HTMLDivElement>(null)
useEffect(() => {
const paths = root.current?.querySelectorAll<SVGPathElement>('path')
if (!paths) return
paths.forEach((p) => {
const len = p.getTotalLength()
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len, fillOpacity: 0 })
})
const tl = gsap.timeline()
tl.to(paths, { strokeDashoffset: 0, duration: 1.4, stagger: 0.1, ease: 'power2.inOut' })
.to(paths, { fillOpacity: 1, duration: 0.6 }, '-=0.3')
}, [])
return (
<div ref={root}>
<svg /* 你的 logo */ />
</div>
)
}何時用
- ✅ 品牌站 hero 開場
- ✅ Logo wall hover
- ✅ Loading 完成的 reveal moment
何時別用
- ❌ 太複雜的 logo（路徑 > 15）
- ❌ 每次切頁都播（會煩）
- ❌ Photo / bitmap logo
我踩過的坑
-
path 沒 fill 看起來只是線條：要先 fill: 原色 + fillOpacity: 0， tween 才會「上色」。
-
stroke 顏色 vs fill 顏色不同會閃：開頭用 currentColor 統一最穩。
-
SSR getTotalLength 拿不到：必須在 useEffect / client。
相關效果
- G06 SVG Path Draw — 基礎版