Comment créer une vidéo qui se lance au scroll avec GSAP

				
					<div class="video-container">
  <video
    id="scrollVideo"
    src="https://gflo.fr/wp-content/uploads/2025/05/IMG_7074.mov"

    preload="metadata"
    muted
    playsinline
    style="display: none;"
  ></video>
</div>

<script type="importmap">
{
  "imports": {
    "gsap": "https://unpkg.com/gsap@3.12.5/index.js",
    "gsap/ScrollTrigger": "https://unpkg.com/gsap@3.13.0/ScrollTrigger.js"
  }
}
</script>

<script type="module">
  import gsap from 'gsap'
  import ScrollTrigger from 'gsap/ScrollTrigger'
  gsap.registerPlugin(ScrollTrigger)

  document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('scrollVideo')
    const container = document.querySelector('.video-container')

    // 1. Pré-charge la vidéo
    video.play().then(() => video.pause())

    video.addEventListener('loadedmetadata', () => {
      video.style.display = 'block'

      const duration = video.duration
      const scrollPx = duration * window.innerHeight

      // on pousse la section suivante
      container.style.height = `${scrollPx + window.innerHeight}px`

      // 2. ScrollTrigger pour le filtre grayscale → couleur
      ScrollTrigger.create({
        trigger: container,
        start: 'top bottom',    // quand le top du container arrive en bas de viewport
        end: 'top top',         // jusqu’à ce qu’il atteigne le top
        scrub: true,
        onUpdate: self => {
          // self.progress va de 0 → 1 : on passe de 100% gris → 0% gris
          const pct = 100 - self.progress * 100
          video.style.filter = `grayscale(${pct}%)`
        }
      })

      // 3. ScrollTrigger pour le scrub de la vidéo et le pin
      ScrollTrigger.create({
        trigger: container,
        start: 'top top',
        end: () => `+=${scrollPx}`,
        scrub: true,
        pin: true,
        anticipatePin: 1,
        onUpdate: self => {
          video.currentTime = self.progress * duration
        }
      })
    })
  })
</script>