gsap-video-export scroll example

export-video.js

import { videoExport } from 'gsap-video-export'

let videoDetails
try {
  videoDetails = await videoExport({
    url: 'https://nodcoding.com/',
    output: 'scroll-page.mp4',
    /* This is the additional script that gets run on the page itself */
    script: async () => {
      /* Load GSAP into the page using esm.sh <3, if it's not already accessible on the window */
      const gsap = (await import('https://esm.sh/[email protected]')).default
      const ScrollToPlugin = (await import('https://esm.sh/[email protected]/ScrollToPlugin')).default
      gsap.registerPlugin(ScrollToPlugin)

      /* Create a custom timeline on the window for gsap-video-export to hook into */
      window.customTimeline = gsap.timeline()

      /* Add a scroll to the timeline */
      window.customTimeline.to(window, { duration: 12, scrollTo: { y: 'max' }, ease: 'power2.inOut' })
    },
    timeline: 'customTimeline', /* Custom timeline object */
    viewport: '900x900',
    advance: 'timeweb', /* We need this to capture animations happening outside of our scroll */
  })
} catch (err) {
  /* Catch oopsie */
  console.log(err)
}

/* All done here's some stats */
console.log(videoDetails)