Q: how to add "fade in" transition effect for Mapbox circle layer

Question

I'm loading points from Geojson in batches and would like to add "fadeIn" effect or animation when the points first appear in Mapbox.

this.map.addLayer({
  id: 'points',
  type: 'circle',
  paint: {
    'circle-radius-transition': {duration: 300},
    'circle-color': '#F98200',
    'circle-stroke-color': '#D23B00',
    'circle-stroke-opacity': 0.5,
  },
  source: 'points',
})

I tried circle-radius-transition but it does not seem to help.

Answer 1

You are on the right track with the paint properties. I think what you need is the circle-opacity-transition.

Follow these steps:

1. Add the points with 'circle-opacity': 0 as default opacity value
2. Set the 'circle-opacity-transition' as you wish

3. After the map is loaded change the layers 'circle-opacity' to 1 and your layer will be faded in.

   map.addLayer({
     "id": "point",
     "source": "point",
     "type": "circle",
     "paint": {
       "circle-radius": 20,
         // here we define defaut opacity is zero
         "circle-opacity": 0,
         "circle-opacity-transition": {duration: 2000},
         "circle-color": 'red'
         }
   });
   

You can check out this solution here: codepen