Experiments >

Code animation: Insert at point

Experiment #13816th April, 2021by Joshua Nussbaum

For the timeline portion of the code animation project, the user will want to place an event anywhere on the timeline.

They initiate the process by moving their mouse to a point in the timeline, and right-clicking to show a context menu and choosing what type of event they want to add.


The whole thing works by capturing the mouseover event to get the current point. When the right-click happens - before showing the context menu - the last point is captured. This is needed because the user will continue to use their mouse to navigate thru the context menu, and we don’t want those movements impacting the insertion point.

Once the menu option is chosen, an event is fired called on:add, which the parent handles to add an event to the list:

  let events = []

  function add({detail: {type, point}}) {
    events = [...events, { type, x: point.x }]

<Timeline {events} on:add={add}/>




view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow