ページ遷移・画面切り替え系

GSAPで作る横帯ワイプのページ切り替え

4本の横帯を時間差で伸縮させ、コンテンツの更新を自然に隠すページ遷移パーツを作ります。

Yutaka Kizaki

@junkbranding

2026年8月2日

読了時間: 6分

構成 / File Structure

</>Code Viewer

const PAGES = [
  { name: 'Genesis', tone: 'genesis' },
  { name: 'Threshold', tone: 'threshold' },
  { name: 'Sanctum', tone: 'sanctum' },
]

const ROW_COUNT = 4

function useStripTransition(rootRef, onCovered) {
  const timelineRef = React.useRef(null)

React.useEffect(() => {
    const context = gsap.context(() => {
      gsap.set('.wipe-strip', {
        scaleX: 0,
        transformOrigin: 'left center',
      })
      gsap.set('.wipe-label', { yPercent: 110 })
    }, rootRef)

return () => {
      timelineRef.current?.kill()
      context.revert()
    }
  }, [rootRef])

return () => {
    if (timelineRef.current?.isActive()) return

const strips = rootRef.current.querySelectorAll('.wipe-strip')
    const label = rootRef.current.querySelector('.wipe-label')

timelineRef.current = gsap.timeline()
      .set(rootRef.current, { pointerEvents: 'all' })
      .set(strips, { scaleX: 0, transformOrigin: 'left center' })
      .to(strips, {
        scaleX: 1,
        duration: 0.72,
        ease: 'power4.inOut',
        stagger: 0.07,
      })
      .to(label, {
        yPercent: 0,
        duration: 0.5,
        ease: 'power3.out',
      }, '-=0.32')
      .call(onCovered)
      .to(label, {
        yPercent: -110,
        duration: 0.38,
        ease: 'power3.in',
      }, '+=0.18')
      .set(strips, { transformOrigin: 'right center' })
      .to(strips, {
        scaleX: 0,
        duration: 0.72,
        ease: 'power4.inOut',
        stagger: 0.07,
      }, '-=0.18')
      .set(rootRef.current, { pointerEvents: 'none' })
  }
}

function HorizontalStripWipe() {
  const [pageIndex, setPageIndex] = React.useState(0)
  const overlayRef = React.useRef(null)
  const nextPage = PAGES[(pageIndex + 1) % PAGES.length]
  const playTransition = useStripTransition(overlayRef, () => {
    setPageIndex((current) => (current + 1) % PAGES.length)
  })
  const currentPage = PAGES[pageIndex]

return (
    <main className={`wipe-demo ${currentPage.tone}`}>
      <div className="page-content">
        <p>Selected chapter</p>
        <h1>{currentPage.name}</h1>
        <button type="button" onClick={playTransition}>
          Go to {nextPage.name}
        </button>
      </div>

<div ref={overlayRef} className="wipe-overlay" aria-hidden="true">
        {Array.from({ length: ROW_COUNT }, (_, index) => (
          <span className="wipe-strip" key={index} />
        ))}
        <div className="wipe-label-mask">
          <p className="wipe-label">Emberfall</p>
        </div>
      </div>
    </main>
  )
}