Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG text experiment - Animating texts using d3+Greensock

Public visualization

Viewing a saved revision (read-only)

be0499ee66d44752bd4139d880f793aa

SVG text experiment - Animating texts using d3+Greensock

1 star1🌍 Public
LLaurens
Last edited Jul 15, 2020
Created on Jul 8, 2020

Eight cards containing associative words and short texts orbit a central call to action on a dark background. The words “Body,” “Audience,” and “Precarity” repeat with varying prose, each card’s text tracing a rectangular path via SVG `<textPath>` elements. Using d3.v5 for dynamic SVG creation and Greensock (GSAP) for animation, the text strokes sequentially into view from a hidden start offset, with `gsap.from` controlling the `startOffset` attribute per card. The final invitation fades in after all cards finish animating.

AI-generated description

Animating text along a path using d3+greensock

Steps taken

  • Start from an old greensock example, here
  • Move all svg code to js so elements can be created and manipulated dynamically
  • Clean up this project so it can be used as an examle or template