Skip to main content
100%

Text Ticker Function

✓ Published0🌍 Public
TTommyCoin80
Last edited Jan 10, 2018
Created on Jan 10, 2018

This example demonstrates a reusable text-ticker function that automatically animates long text horizontally when it exceeds its container’s width. A blue rectangle with a fixed size acts as the viewport, and a clip-path hides any text extending beyond its bounds. The implementation uses D3 v4’s `transition` with `d3.easeLinear` to move the text from right to left, then resets its position and loops indefinitely. The `tickText` function checks the text’s `getBBox().width` against a maximum width to trigger the animation.

AI-generated description

A function to make "tick" text if it's too long for its containter (or clip-path)

Built with blockbuilder.org

mit Licensed

Similar vizzes