I'm doing a very simple video editing solution. User has a timeline (horizontal 100px line) which represents start and end of the video. User can add overlay images and texts, and all of them appear on the timeline. The location and width represents the start time and duration of the overlay element that appears over the video.

Problem is to find the best way to make overlapping elements appear on the timeline. I have a video length of 10 minutes which represents 600 seconds. The length of the timeline is 1200px so 1 second = 2 pixels.

  1. Text appears (start) at 00:10 (20 pixels offset) and duration is 20 seconds (40 pixels).

  2. Image appears at 00:15 (30 pixels offset) and duration is 40 seconds (80 pixels).

So based on start and duration values of the elements they overlap. How to draw them on the timeline? I got few ideas from Good ways to handle precisely overlapping data points in a graph?

I decided to try few things

Puzzle style


Color mix


But I'm not really impressed with both solutions. The problem can be also if there are 3 or more overlapping elements on the timeline. I'm aware of the different existing video editing solution. Most of the solve this by multiple timelines (layers) or with zooming. My goal is to try to make it simple, but at the same time give a nice ability to show overlapping elements.

My question is: what do you recommend? How to solve this?

3 Answers 3


You can use a thick line for each element. Have a tooltip for each line, to show what each line represents.


download bmml source – Wireframes created with Balsamiq Mockups

  • This is an option, but again it's layers. You cannot have them small, because then it's really hard to drag/resize them (mouse select). But if you increase the height, then the whole height gets too large.
    – FrEaKmAn
    Aug 31, 2014 at 12:34
  • Three other alternative options : 1. Enlarge the selected line. 2. Line variable width size, very wide lines when only two, decrease width as more lines are added. 3. Add a scrollbar and mimize maximize buttons on the timeline box. Aug 31, 2014 at 13:20

I really hope someone will come up with some creative solution; but I'm afraid my verdict is that it cannot be done, and whatever solution will be taken, it will not provide an optimal solution.

Having substantial with both video and audio editing software, this is a common problem - multiple regions on the same lane that overlap.

Although you didn't say it, I assume the users will interact with the regions (drag and drop) for instance, and you should consider a case where a region is completely eclipsed by another region.

You could, in theory, provide layers on each lane (one for text, one for image, etc.) and allow the users to reorder the layers so to make regions of interest front-most. Then for overlapping you could simply use different heights (so regions behind are taller than those in front). But such solution is neither as usable nor easier to implement compared to simply having a few lanes.

  • Yes, some interaction is also preferable as you mentioned: from drag&drop to resize. Using different heights can be interesting.. hm
    – FrEaKmAn
    Aug 29, 2014 at 6:35

Of the two approaches you have mentioned, Color Mix looks cleaner. But, the real problem occurs when there are more than one overlapping image/text at any single/consecutive frames.

One other option will be to create separate lanes for each of the object and mark their position & duration in the timeline, and also assign different color for each of the object. You could couple it with your Color Mix timeline, where the Color Mix will be the base timeline and the user be given an option to expand and see the multi-lane timeline, if the Color Mix timeline looks confusing (as a result of multiple layers being overlapped).

  • I don't want to have multiple lanes (layers) because then I can get a problem of too much lanes. But, I think it's possible to have additional button which expands the timeline and each element is on a new layer. By default the timeline is contracted.
    – FrEaKmAn
    Aug 29, 2014 at 6:40
  • Yes, expand/contract is what I was suggesting. If you feel multiple lanes will add complexity to implementation or become a clutter on the UI, one more thing you can try is to just have Color Mix and use hover-popup on the frames to display what images/texts are available in the frame (as well as the duration/start time of them). This though will not allow you the liberty to provide drag & drop features on the timeline. P.S.: Not sure if hover popup is even a standard term, by that I meant to say the dialogs that popup when we hover on to something. Aug 29, 2014 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.