Experiments >

Code animation: Infinite tick marks

Experiment #12312th April, 2021by Joshua Nussbaum

Yesterday I did a mockup of the timeline editor. One thing I found is that timeline view can grow horizontally based on the duration of the timeline. Which means the tick marks at the top of the timeline must grow based on the duration too.

The method I settled on is using an <svg> for the tick marks. It has a dynamic width based on the duration. This way when the duration of the video increases, the width would increase by the same factor (obeying the zoom scale).

Empty timeline

The only hiccup is when the timeline is empty or less than one screen width. We want the tick to take up at least one screen width.

So I used bind:clientWidth to find that value, and Math.max(...) to select the bigger value, ie screen width or total duration.





  • When the duration scales up, the number of tick marks should scale down. ie. tick mark at every 0.1 second doesn’t make sense if your way zoomed out.
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow