The loop

The strip is a track holding two identical groups of logos. The track moves left by the width of the first group, and then starts again from the beginning. Because the second group is a copy, the picture at the end of the move is the same as the picture at the start, and the eye sees no seam.

Why measured widths matter

Many scrolling strips assume a width: “move by half the track”, or “repeat four times”. That works until an image has not loaded yet. A logo without width and height attributes has no size until it arrives, so the strip is measured too small, and a gap opens on the far side. Ribbonfly Marquee measures the group, and measures again when an image has loaded, when the strip or an item changes size, when fonts are ready and when a hidden tab comes back.

No jump on resize

A new measurement means a new loop length. If the animation were simply restarted, the strip would leap back to the start. The script instead notes how far into the loop the strip is, rebuilds the loop and puts it back at the same place, so a visitor turning their phone sideways sees nothing happen.

Check the sums yourself

Enter the width of your group of logos and the strip below to see how long one loop takes at a given speed and how many copies the strip needs.

Speed, loop time and copies

Pixels per second, seconds per loop, and how many copies it takes to fill the strip. Nothing you type leaves this page.

The script caps the copies at sixty. A strip that would need more is a strip of items so small that you would be better off with larger logos.