Kinetic Arc Jump Pagination

Pagination is often reduced to a blinking light — a teleportation of state. This component rejects that abstraction. It treats the active indicator as a physical object with mass and momentum. By forcing the dot to leap through space to reach its destination, we create a tactile narrative of travel. It transforms a mundane click into a playful, satisfying interaction that mimics the physics of a board game piece.

Core Technique

The illusion of the arc is not created by complex path calculations, but by a stroke of geometric genius using GSAP and SVG Transforms.

• Dynamic Pivot Point: Instead of moving the dot along a Bézier curve, the code calculates the midpoint between the current dot and the target. It then sets the svgOrigin (rotation center) to that midpoint.
• Rotation as Translation: By rotating the pair of dots around this central pivot, the active dot naturally traces a perfect semi-circle arc.
• Blended Easing: The motion feels “alive” because it doesn’t use a standard ease. It utilizes a custom blendEases function that mixes sine.in (for the smooth rotational lift) with elastic (for the wobbling, gelatinous landing).

Customization

The physics of the jump are exposed through the easing configuration. You can tighten the spring or make the jump feel heavier.

Tuning the Physics

// Inside the clickDot function
mainTl.to(currentDotArray, {
    // ...
    // blendEases(startEase, endEase, blender)
    // 'elastic(1, 0.3)' = stiff spring
    // 'elastic(0.3, 0.6)' = loose wobble
    ease: blendEases('sine.in', 'elastic(0.3, 0.6)')
})

Adjusting Geometry

// Controls spacing based on dot radius
spacerX = (allDots.length) * allDots[0].getAttribute('r') / 1.35; 

Browser Support

The animation relies on GSAP’s robust handling of SVG transforms, which irons out browser inconsistencies.