vidscroll0.3.3

Astro

Use vidscroll in an Astro site, as a React island or with the custom element.

There are two ways to use vidscroll in Astro. Use the React components if your site already uses React or you want sections, hooks and callbacks. Use the <vid-scroll> element to add a scroll video without shipping React.

With the React integration

  1. Add React to your project. Skip this if it already uses React.

    Terminal
    npx astro add react

  2. Install vidscroll.

    npm install vidscroll

  3. Write the scroll video, with its sections, in one React component.

    src/components/Hero.tsx
    import { ScrollVideo, Section } from "vidscroll";

export function Hero({ src }: { src: string }) {
  return (
    <ScrollVideo src={src} length="400vh">
      <Section start={0} end={0.3}>
        <h2>Doors close</h2>
      </Section>
    </ScrollVideo>
  );
}

  4. Use that component as an island in your page.

    src/pages/index.astro
    ---
import { Hero } from "../components/Hero";
---
<Hero client:load src="/videos/hero.mp4" />

client:load renders the markup at build time and starts the video when the page loads. client:only="react" works too, if you’d rather skip the build-time markup.

With the custom element

The element needs no integration and ships no React.

  1. Install vidscroll.

    npm install vidscroll

  2. Add the element and import it in a script on the page.

    src/pages/index.astro
    <vid-scroll src="/videos/hero.mp4" length="400vh">
  <vid-scroll-section start="0" end="0.3">
    <h2>Doors close</h2>
  </vid-scroll-section>
</vid-scroll>

<script>
  import "vidscroll/element";
</script>

Astro bundles the script and the element upgrades itself in the page. The element is experimental: see Plain HTML for its attributes.

Sites with a base path

If your Astro site uses a base (for example on GitHub Pages), build video URLs with it, since /videos/hero.mp4 would point outside the site:

src/pages/index.astro
---
const src = `${import.meta.env.BASE_URL}/videos/hero.mp4`.replace("//", "/");
---
<Hero client:load src={src} />

Next steps