Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG text experiment - Choreography of elements

Public visualization

SVG text experiment - Choreography of elements

1 star0🌍 Public
TThijs-hub
Last edited Jul 14, 2020
Created on Jul 14, 2020

A text choreography experiment arranges four cards of poetic and reflective prose around a central, pre-defined circular path on a dark SVG canvas. Each card's text is bound to a hidden rectangular path using `textPath`, with D3.js v5 handling the initial positioning and rotation of the elements around the circle's center. The GreenSock Animation Platform (GSAP) timeline then animates each text's `startOffset` from `-100%` to `100%`, sequentially drawing the words along their paths. Finally, a centered invitation text fades in via `gsap.to`, completing the staged performance.

AI-generated description

Choregraphing elements SVG elements created by d3 and animated using GreenSock

I've created this fork so I can do fancy animations here and let the other viz remain stable.

Comments

Sign in to join the discussion.

MIT Licensed