Timeline improvements for smallest frames and zooming

Open
#213 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

No files or tests are named. Start by locating the timeline, frame, tween, and zoom interaction entry points in the JavaScript code, then reproduce the listed problems at the smallest zoom levels. Done means the seven numbered behaviors are addressed without disrupting ordinary frame selection, stretching, tween manipulation, or timeline navigation.

Written by the indexing model from the issue text.

Description

enhancement

Is your feature request related to a problem? Please describe.
There are a variety of things about the timeline that I think we can improve, particularly when it is zoomed out.

  1. The plus sign overflows the thin frame.
Image
  1. The frame numbers overflow to the left of the frame they're at.
Image
  1. The frame bubbles are still a bit too big.
Image
  1. The tween keyframe is weirdly circular (probably corner radius shenanigans, I'm guessing), and the arrow start/end are very far from the diamonds.
Image
  1. Dragging the tween diamond takes precedence over stretching the frame. This makes it very hard to stretch the frame. Also, the tween diamond's preview shadow thingy is larger than it should be.

https://github.com/user-attachments/assets/34ccdf1f-4c1f-4c0b-8c53-f577e580dd66

  1. We made it so that for a zoomed-enough-out timeline, a frame can only be stretched if it is selected. I think the current implementation might be a bit too strict. If a frame is stretched, the hover target is definitely good enough to allow stretching the frame.
Image
  1. When zooming in and out, you often lose your place in the timeline because the stretch's origin is at the very left. (So, zooming in makes you go backwards in frames as everything gets pushed right)

Describe the solution you'd like
I think it'd be reasonable to slightly increase the minimum frame width, to give just a bit more breathing room.

For everything else:

  1. Remove (or shrink) the plus sign if the frame is too thin. The highlight might be good enough, so removing might be okay.
  2. Force the frame number to sit to the right of the line. (But let's be careful that it doesn't abruptly snap when you hit a threshold)
  3. Shrink the bubbles.
  4. Shrink the corner radius as the keyframe gets smaller, and shrink the margin for the arrows.
  5. Favor stretching the frame over selecting/dragging the tween.
  6. If a frame is a certain number of pixels wide, the frame is actively selected, or a tween on the frame is actively selected, the frame can be stretched.
  7. Stretch relative to the middle of the timeline (or maybe the cursor, or maybe maybe the playhead if it's visible - I don't know what feels good).
Dominant language
JavaScript
Stars
51
Forks
20
Avg merge
14d 12h
Merged PRs (30d)
3

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Candlestickers/Candlestick

All issues in Candlestickers/Candlestick

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.