Open Source For Developers

Frame Scroll Animation Renderer

1. Dezember 2022

Scroll-driven animations have become a powerful visual technique in modern web design. Whether for product launches, landing pages, or immersive storytelling, frame-by-frame animations create striking and engaging user experiences. But building these effects from scratch can be complex and performance-heavy.

This is exactly why the Scroll Animation Renderer exists — a lightweight, dependency-free JavaScript library that makes high-performance canvas scroll animations incredibly easy.

What makes this library unique?

The library offers two primary animation modes:

Image sequences (PNG / JPG) — ideal for 3D renders or exported frames
MP4 video decoding via the VideoDecoder API — offering smooth cinematic transitions

Frames are automatically preloaded, sorted, managed, and rendered based on the user’s scroll position. This results in smooth, tightly controlled animations that look and feel premium.

Basic Usage

A typical setup includes:

A <scroll-animation> custom tag in your HTML
A JSON configuration file that describes the animation

Here’s a simple example:

<scroll-animation 
    section-id="hero"
    animation-id="product-spin"
    host="https://example.com/animations">
</scroll-animation>

Your animation.json file might look like this:

[
  {
    "imageSrcUrl": "",
    "imgSize": [1920, 1080],
    "numFrames": 120,
    "files": [".png"],
    "numSourceFiles": 120,
    "reverse": false
  }
]

The library loads all frames, splits oversized renders into subframes if necessary, caches them globally, and renders the correct image based on the user's scroll progress.

Rendering Frames

Scroll position is mapped directly to a frame index:

animateScroll() {
    let imageIndex = this.getFrameIndex();

    if (imageIndex >= 0 && imageIndex < this.numFrames - 1) {
        this.drawNewFrame(this.images[imageIndex]);
    }
}

This gives you precise control over the playback of your animation without requiring external timeline tools or heavy libraries.

MP4 Support via VideoDecoder

Modern browsers now support the VideoDecoder API, allowing MP4 videos to be decoded frame-by-frame into ImageBitmap objects — just like image sequences.

const videoDecoderInit = {
    output: (frame) => {
        createImageBitmap(frame).then((bitmap) => {
            bitmap.index = animationRef.images.length;
            animationRef.images.push(bitmap);
        });
    },
    error: (error) => console.error(error)
};

const decoder = new VideoDecoder(videoDecoderInit);
decoder.configure(config);

This is perfect for high-quality animations while keeping the file size small and loading times fast.

Installation

npm i YOUR_PACKAGE_NAME --save

Once installed, you can include the script in your project and start defining animations immediately. The library works in any modern browser and requires no special build setup.

Example Project Structure

my-app/
├─ animations/
│ ├─ product-spin/
│ │ ├─ 0001.png
│ │ ├─ 0002.png
│ │ ├─ ...
│ │ ├─ animation.json
├─ src/
│ ├─ main.js
└─ index.html

The library handles preloading, caching, frame extraction, sorting, and rendering. You simply provide the files — everything else is automatic.

Build stunning, high-performance scroll animations with minimal effort! The full source code is available on GitHub: View the Repository.

Happy scrolling!

Menü