Chapter 179: Seamless Horizontal Loop (Helper)

Core Idea

A responsive, ticker/slider-style helper: elements scroll along the x-axis and wrap back around seamlessly, using xPercent so it stays correct even if element widths change (e.g. on resize).

Key Concepts

horizontalLoop(items, config) returns a Timeline with extra navigation methods attached: next(), previous(), toIndex(i) (always shortest direction), current().
config options include speed (default ~100px/sec), paused, repeat, reversed, paddingRight.
times: array of the timeline times where each item reaches the "starting" position; matching labels (label1, label2...) are added too.
Uses xPercent instead of x specifically so it remains correct if the elements' actual pixel widths change responsively.

Code Examples

let loop = horizontalLoop(gsap.utils.toArray(".box"), { paused: true, repeat: -1 });
loop.next({ duration: 0.5, ease: "power1.inOut" });
loop.toIndex(3, { duration: 1 });

What it demonstrates: the extra next()/toIndex() API this helper adds on top of a normal Timeline for slider-style navigation.

Key Takeaways

Prefer this over hand-rolling infinite scroll logic — it already handles wraparound and resize correctness.

Connects To

Timeline (core): the base object this helper extends with slider-navigation methods.