mapbox / mapbox/mapbox-gl-js

Style-spec: interpolation of transition APIs

Open
#10,799 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

### Transition API

Capturing from the [style-spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/transition/):

> A transition property controls timing for the interpolation between a transitionable style property's previous value and new value. A style's root transition property provides global transition defaults for that style.

The options that we atm allow a developer to configure are `duration` and `delay`:

```
"transition": {
"duration": 300,
"delay": 0
}
```

This issue is a RFC to improve the capabilities of the transition API by adding support for interpolation.

### Interpolation

Interpolation, in context of animation, refers to the rate of change of an animation. This rate of change can visually look like the animated component is being accelerated, decelerated, etc. A standardized way to represent interpolation is through the cubic bezier curve. This allows to define an interpolator through 4 control points.

For example, an easing animation can be exposed as `cubic-bezier(0.42, 0.0, 1.0, 1.0)`

```
"transition": {
"duration": 300,
"delay": 0
"cubic-bezier": [0.42, 0.0, 1.0, 1.0]
}
```

### Additional context
This feature request came about when talking to @nishant-karajgikar for supporting layer property animations on iOS. While Android uses platform driven animations to achieve this use-case, it does require to call into gl-native with each animation update. This approach is also not feasible for iOS, the animation system is too tightly coupled to the iOS view system.

Next to this proposed addition to the style-spec, if we want to properly expose an layer property animation system, we can look into building more APIs that validate the state of a transition (eg. isRunning) and the addition of observers to get notified when a transition has ended.

cc @asheemmamoowala @tmpsantos @alexshalamov @knov @sbma44

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 with the linked style-spec transition documentation and review the currently described duration and delay options. Clarify the proposed cubic-bezier representation and whether transition state and observer APIs are in scope. Done requires an accepted API design plus identified implementation and test locations; this RFC names no files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.