GSAP SVG Circle Unwrapping Animation

This GSAP SVG Circle Unwrapping Animation is a masterclass in visual sleight of hand. Instead of mathematically morphing a curved path into a straight line (which often results in distorted, unappealing stroke widths), this component creates a seamless illusion. It splits a circle into two halves and synchronizes their movement with a dynamically generated straight line, making it appear as though the circle is being physically unrolled or “unwrapped” like a ribbon.

Core Technique

The effect relies on coordinating three distinct actions simultaneously using a GSAP Timeline. The secret is that the circle doesn’t actually straighten; it disappears while a line appears.

1. Dynamic Setup

The script calculates the exact length of the semi-circles using DrawSVGPlugin.getLength(). It then dynamically injects a new <line> element into the SVG at the exact starting coordinates of the curves. This ensures pixel-perfect alignment between the “curved” and “straight” segments.

// Calculate length for timing and positioning
let length = DrawSVGPlugin.getLength(target1);

// Create the straight line dynamically
let lineTarget = document.createElementNS(svgns, "line");
demo.appendChild(lineTarget);

2. The “Unwrap” Illusion

The animation consists of three synchronized tweens happening at time: 0 in the timeline:

1. Erase Curves: The drawSVG: 0 property erases the semi-circles.
2. Move Curves: Simultaneously, the semi-circles are translated outwards (x: length) to follow the tip of the expanding line.
3. Expand Line: The central line expands outwards (x1, x2) to fill the gap left by the moving curves.

// 1. Erase the curve
tl.to(target2, { drawSVG: 0, x: length, yoyo: true, repeat: 1 }, 0);

// 2. Expand the straight line to fill the gap
tl.to(
  lineTarget,
  { 
    attr: { x1: "-=" + length, x2: "+=" + length }, 
    yoyo: true, 
    repeat: 1 
  },
  0
);

Accessibility (A11y)

• Motion: The animation is rapid and repeats infinitely, which can trigger vestibular disorders. It is essential to wrap the gsap logic in a check for window.matchMedia("(prefers-reduced-motion: reduce)").
• Content: The rapidly changing number in the center is readable visually but may be confusing for screen readers if not properly labeled with aria-live="off" (to prevent constant chatter) or aria-atomic.

Browser Support

The animation relies heavily on JavaScript performance and SVG rendering. It works well in all modern browsers.