Why does the animation loop without a visible jump?

Each frame's shift amount is a fraction of the full image width (or height), and the wraparound shift used (the same logic as the PNG Shifter tool) means content pushed off one edge reappears on the opposite edge, so the last frame flows smoothly back into the first.

Can I scroll vertically instead of horizontally?

Yes, choose the vertical direction to shift content up-to-down (with wraparound) instead of left-to-right.

Does the source image need to be seamlessly tileable?

For a perfectly invisible seam as it wraps, yes — a texture designed to tile edge-to-edge looks best. Non-tileable photos will still scroll, but you'll see a visible edge where the content wraps.

Is the output a real animated file?

Yes, it's a spec-valid APNG built from acTL/fcTL/fdAT chunks with zlib-compressed scanlines, the same encoder used across this category's other APNG-generating tools.

Scrolling PNG Creator - Turn a PNG into a Seamless Scrolling APNG

Overview

Introduction

This tool turns a static PNG into a looping scroll animation, the kind of effect used for marquee text banners or seamlessly scrolling background textures, packaged as a real Animated PNG file.

Everything happens locally in your browser, from shifting each frame's pixels to compressing and packaging the final APNG.

What Is Scrolling PNG Creator?

A client-side APNG generator built on top of the PNG Shifter's wraparound-shift function: each frame shifts the source image's content by a growing fraction of its width (or height), wrapping content around the opposite edge instead of dropping it.

Because the shift amounts are evenly spaced fractions of the full dimension, the final frame's content sits just short of a complete revolution, so playback loops seamlessly.

How Scrolling PNG Creator Works

For a chosen frame count N, frame i is shifted by round((i / N) x span) pixels, where span is the image's width (horizontal scroll) or height (vertical scroll), always with wraparound enabled.

Each shifted frame is handed to the same APNG chunk encoder used by the Fade-in and Fade-out Generators to build the final multi-frame file.

When To Use Scrolling PNG Creator

Use it for a scrolling background texture, a marquee-style banner, or a looping ticker effect built from a single static image.

It also works well for previewing how a repeating pattern or texture looks in continuous motion.

Often used alongside PNG Fade-in Generator, PNG Slideshow Creator and PNG Tile Creator.

Features

Advantages

Loops seamlessly with no visible cut, since every frame is a pure wraparound shift of the same source pixels.
Reuses the already-tested PNG Shifter logic rather than re-deriving wraparound-shift math.
Runs entirely client-side; no server ever sees the uploaded image.

Limitations

Only shifts content; it doesn't repeat/tile the source image first, so non-tileable images will show a visible seam as content wraps around the edge.
Frame count is capped at 60, and every frame stores its own full compressed pixel data, so file size grows with frame count.

Examples

Scroll a tileable stripe pattern

Input

A 64x64 seamless stripe texture, horizontal, 16 frames

Output

A looping APNG that scrolls the stripes smoothly to the right with no visible seam

A tileable source image wraps cleanly since its left and right edges already match.

Vertical scrolling ticker

Input

A 300x40 banner PNG, vertical, 20 frames

Output

A looping APNG that scrolls the banner content upward

Choosing the vertical direction shifts rows instead of columns, with the same wraparound behavior.

Best Practices & Notes

Best Practices

Use a source image designed to tile at its edges for a seamless-looking scroll.
Increase frame count for a smoother-looking scroll motion, especially on wider images.

Developer Notes

This lib file imports shiftPng (from png-shifter.ts) for the wraparound-shift math and encodeApng (from png-fade-in-generator.ts) for chunk packaging, rather than reimplementing either, per the codebase's reuse-over-reimplementation convention.

Scrolling PNG Creator Use Cases

A looping scrolling background texture for a web page or game
A marquee-style animated banner or ticker
Previewing how a tileable pattern looks in continuous motion

Common Mistakes

Using a non-tileable photo and expecting a seamless loop — the wraparound will show a visible edge unless the source repeats cleanly.
Choosing a very high frame count for a small image, producing a larger file than the smoother motion is worth.

Tips

Preview the animation directly in the output panel before downloading, since most browsers render APNG natively.
Combine with the PNG Tile Creator first to build a wider seamless source pattern before scrolling it.

Scrolling PNG Creator