G09▸A106▸gsap

SplitText Char by Char

字符甩入

難度 ★★★★★標籤文字 · stagger · 字符2 min read

效果簡述

把字串拆成單字符，每個字符獨立進場。GSAP 官方 SplitText plugin 要錢，但你可以手動拆 Array.from(text) 達成 90% 效果。

▸ 預設|字符 y 進場

Claude Code Prompt

💬 Claude Code Prompt

參考：A106 splittext char by char
技術：手動 Array.from + gsap stagger

具體行為:
- text 用 Array.from(str) 拆成字符（支援 emoji / 中文）
- 每個 span 給 className "char inline-block"
- 加 aria-label={text} 在外層；字符 aria-hidden
- gsap.from('.char', { y: 30, opacity: 0, rotate: -8, stagger: 0.04, ease: 'back.out(1.6)' })

限制：
- 不要拆得太細（一段話 100+ 個 span 會吃效能）
- 一定要 aria-label，否則螢幕閱讀器讀成「ㄍ ㄕ ㄚ 一」
- space 要轉 \u00A0 才不會被瀏覽器吃掉

完整程式碼

SplitTextChar.tsx

'use client'

import gsap from 'gsap'
import { useEffect, useRef } from 'react'

const text = 'Hello GSAP'

export function SplitTextChar() {
const root = useRef<HTMLDivElement>(null)

useEffect(() => {
  const ctx = gsap.context(() => {
    gsap.from('.char', {
      y: 30,
      opacity: 0,
      rotate: -8,
      duration: 0.5,
      ease: 'back.out(1.6)',
      stagger: 0.04,
    })
  }, root)
  return () => ctx.revert()
}, [])

return (
  <h2 ref={root} aria-label={text}>
    {Array.from(text).map((c, i) => (
      <span key={i} className="char inline-block" aria-hidden>
        {c === ' ' ? '\u00A0' : c}
      </span>
    ))}
  </h2>
)
}

何時用

✅ Hero 主標進場
✅ Logo 副標 reveal
✅ 章節大字

何時別用

❌ 長文 / 段落（性能 + 閱讀感）
❌ 已經有重特效的區塊
❌ 多語切換頻繁（重新拆很煩）

我踩過的坑

空白被瀏覽器壓縮：' ' → 用 \\u00A0 不會被吃掉。
沒 aria-label 螢幕閱讀器爆炸：會逐字唸。外層加 aria-label={text}，內層 char 加 aria-hidden。
GSAP 商業 SplitText：付費 plugin（Club GreenSock）。 95% 場景手動拆就夠。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋