mapbox / mapbox/mapbox-gl-js

Support for animation/transitions when setting data-driven paint properties

Open
#3,170 20 comments 22 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cross-platform :tv: feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Up until support arrived for data driven fill-color I generated multiple layers and styled them separately to achieve color reliefs. The data driven approach has allowed me to go from hundreds of layers to one, which is great!

One visual effect that I lost, however, is that when I used to change color on my previous individual layers with discrete fill-color values I got a subtle fading effect, which was quite nice.

Now, when updating the data-driven property with new stops/colors, the change is much more disruptive and some polygons are even non-visible for a short instant.

I understand that transitioning from one data-driven setting to another is a bit more complicated than doing so between two discrete values. I believe, however, that this should be possible in principle.

Have you discussed having data-driven properties transition smoothly as well?

Contributor guide

Open the contributing guide

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.

Research direction

Start by reviewing the issue discussion and the existing behavior for data-driven paint-property updates and transitions. Done means changes between data-driven fill-color stops or colors render smoothly without the disruptive update or brief polygon disappearance described here, with appropriate coverage added where the project’s current tests for this behavior reside.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.