Style-spec: interpolation of transition APIs
Nobody has claimed this yet.
- 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
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
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