Comment by DemoVexa on "Animated Release Banners for GitHub Releases and CHANGELOG.md"

Treating the banner copy like a commit title is a good rule. Two things I'd add from the reader's side. Hold the finished line on screen for a second or two before the loop restarts. People arrive mid-animation, and if the full message only sits there for a few frames, many of them read half a version number. And a looping GIF can't be paused, which some readers find hard while they work through upgrade steps. GitHub renders the picture element in Markdown (it's how light and dark mode images work), so a source with media="(prefers-reduced-motion: reduce)" pointing to a still PNG of the final frame should give those readers a static banner while everyone else gets the GIF. For releases that change the UI, I'd put a short silent clip of the change right under the banner. The banner says what changed, and the clip shows it.

Thanks, DemoVexa! Totally agree on the pause. A loop that restarts the instant the last line finishes feels rushed, so I usually hold the final frame for about 1.5 to 2 seconds before it replays. That's long enough to actually read the version number.

Holding the last frame for a beat or two is a good rule. It also gives people a moment to read the version number before the loop restarts. Do you add a fade on the replay or just cut back to the first frame?

Thanks again, DemoVexa, this thread has been really helpful. I just cut straight back to the first frame, but a short fade is a good idea since it makes the restart feel less abrupt. I'll try it on the next release banner.

One thing to watch when you try the fade: every frame of a fade changes every pixel, and a GIF's 256 colour palette handles gradients badly, so the file can grow a lot and the fade can show banding. A quick dissolve of a few frames is usually enough. Another option is to hold the last frame a little longer and then cut to a first frame that is almost empty, so the jump back is small without any extra frames. Good luck with the next release.

Thanks, DemoVexa! The trick of holding the last frame and then cutting to a nearly empty first frame is a smart way to avoid the banding, so I'll try that before adding any fade frames.

Search Hashnode