Parallax Scroll Effect

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

gsap.registerPlugin(ScrollTrigger)

export function ParallaxSection() {
  const bgRef = useRef(null)
  const fgRef = useRef(null)

  useEffect(() => {
    gsap.to(bgRef.current, {
      yPercent: -30,
      ease: 'none',
      scrollTrigger: {
        trigger: bgRef.current,
        start: 'top bottom',
        end: 'bottom top',
        scrub: true,
      },
    })

    gsap.to(fgRef.current, {
      yPercent: -15,
      ease: 'none',
      scrollTrigger: {
        trigger: fgRef.current,
        start: 'top bottom',
        end: 'bottom top',
        scrub: true,
      },
    })
  }, [])

  return (
    <div className="relative h-screen overflow-hidden">
      <div ref={bgRef} className="absolute inset-0 bg-gradient-to-b" />
      <div ref={fgRef} className="relative z-10">Content</div>
    </div>
  )
}