Experiments >

Timeline manual position selection

Experiment #319th March, 2021by Joshua Nussbaum

Continuing with yesterday’s timeline editor experiment, I looked into how to allow the user to re-position the timeline’s cursor manually.

The whole timeline is controlled by a linear tween $pos. By capturing click events, we can determine the x position with event.clientX and translate that back to $pos. But we can’t adjust $pos directly, ie $pos = newPos, because that will cause the store to tween from the current value to newPos.

The trick is tell the store to not tween this change. We can do that by seting the duration parameter to zero when setting the tween. pos.set(newValue, {duration: 0}).

Here’s the code:


Here’s what it looks like:

view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow