Play video on scroll in Framer

Back to all components

Play video on scroll

Preview live

Remix For Free

Overview

This override syncs video playback with the user's scroll position, creating a smooth scrolling experience. Instead of playing at a fixed speed, the video progresses as the user scrolls, giving full control over playback timing.

You can also use this override to create an image sequence effect, where scrolling swaps images frame by frame to simulate an animation. This is ideal for showing product rotations, step-by-step processes, or seamless motion effects.

How to use

There are two variables that control the behaviour of the override:

SCROLL_START

-> Defines when the video starts playing. If set to 0, the video starts as soon as the user scrolls. If set to 1000, the video starts after the user has scrolled 1000 pixels down the page.
SCROLL_DISTANCE

-> Determines how far the user must scroll for the video to reach the end. If set to 5000, the video will play over a 5000-pixel scroll range, starting from SCROLL_START

You can find these two variables at the very start of the override, at lines 5 and 6:

import type { ComponentType } from "react"
import { useTransform, useScroll } from "framer-motion"

export function videoScrollProgress(Component): ComponentType {
    const SCROLL_START = 0 // Scroll position when animation starts
    const SCROLL_DISTANCE = 5000 // Scroll distance after which animation ends

    return (props) => {
        const { scrollY } = useScroll()

        // Map scrollY with precise intervals
        const progress = useTransform(
            scrollY,
            [SCROLL_START, SCROLL_START + SCROLL_DISTANCE],
            [0, 1],
            { clamp: true }
        )

        return <Component {...props} progress={progress} />
    }
}

Check more
free resources

Explore more free components, animations, overrides, and clonables to build better and faster

Browse all

Theme variant switcher

Copy to clipboard

Moving mouse effect