Mapbox-gl-js: Transition Opacity Instantly

[ShibaBandit]

Is there a way to transition the opacity paint property instantly in GL-GS? I've done this in the Native SDK for Android but on JS it does an interpolation. I think I'm in a smaller use case in that I'm trying to find ways to animate weather data using Mapbox GL GS, but the gradual fade in/out for opacity hurts my eyes.

I was playing with the recent wind barbs blog post here.

I basically took this but animated it with a list of vector tile sets.

mapbox-gl-js version:

v0.31.0

Steps to Trigger Behavior

Turn layer paint opacity layer from 1 to 0, 0 to 1

map.setPaintProperty("layerName", "icon-opacity", "0");
//... time elapsed ...
map.setPaintProperty("layerName", "icon-opacity", "1");

Expected Behavior

Instant opacity value transition.

Actual Behavior

Gradual opacity value transition.

[lbud]

@ShibaBandit this isn't very well-documented, but you can set a specific paint property's transition as if it's a paint property itself. Your layerName layer's paint object should look like this:

"paint": {
    "icon-opacity": 1,
    "icon-opacity-transition": {
        "duration": 0
    }
}

[lbud]

(Possible transition values duration and delay, documented here.)

[alin0908]

Transition properties do not work in my case.

map.addLayer({ 'id': 'places-details', 'type': 'symbol', 'source': 'places', 'layout': { 'icon-image': '{icon}', 'text-field': '{data}', 'icon-size': .8, 'text-anchor': 'center', }, 'paint': { 'text-color': '#ffffff', 'icon-opacity': [ 'case', ['boolean', ['feature-state', 'hover'], false], 1, 0 ], 'text-opacity': [ 'case', ['boolean', ['feature-state', 'hover'], false], 1, 0 ], "text-opacity-transition": { "duration": 3000, "delay": 0 }, "icon-opacity-transition": { "duration": 300, "delay": 0 } }, });

feels bad.

[pedrobarquinha]

@alin0908 transitions don’t work with feature-state. It’s a huge bummer