Per-layer control of collision fade-in/fade-out
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
When we do collision detection for symbols and we detect that a symbol is newly visible or newly collided, we animate a fade-in or fade-out of the symbol. Sometimes the fade-in/fade-out doesn't work well with use cases that programmatically modify symbols as part of some user interaction or animation.
One problem is that "fade-out" only works when a symbol is still present, but _collided_. When symbols are being removed from a tile programmatically, they disappear immediately. However, when they're added back, they fade in -- this asymmetry isn't very visually pleasing.
This is also a problem with animations that move the position of a symbol can causing flickering (see #6052). If collision detection isn't necessary for the symbols, we can use `*-allow-overlap: true` and avoid the flickering, but that's not always a practical solution.
Adding a per-layer ability to disable the fade animation could ameliorate some these problems (as a runtime configuration, or maybe as part of the style spec?). By disabling fade animations for just the animated layer:
- Newly added symbols with `allow-overlap: false` would show up more quickly (immediately with the next placement, although that could still take up to 300ms to happen).
- The animation asymmetry between adding and removing a symbol could be avoided
However, I don't think it'd help much with the #6052 case -- the flicker would just go from "fade-in -> disappear -> fade-in" to "appear -> disappear -> appear".
/cc @ansis @jfirebaugh @lbud
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files, tests, or entry points are named. Start by tracing collision detection and symbol fade-in/fade-out behavior, then determine whether per-layer control belongs in runtime configuration or the style specification. Done should be a defined and validated way to disable fade animations for a selected layer, with the affected symbol behaviors covered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100