Smoother Globe Layer Loading

Is there a way to animate the opacity of a display layer on the globe? I am trying to overlay maps with an opacity slider but the opacity only updates when the slider is released. Is it possible to make the update more continuous?


Is there a way to make this operate more smoothly without the flashing reload?

Here’s the code:

const onChangeOpacity = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (event: any) => {
      setMapOpacity( / 100);

        <UnFillMap />

          value={mapOpacity * 100}

        <FillMap />

Image provider:

    const provider = new Cesium.UrlTemplateImageryProvider({
      url: String(mapUrl).replace(/\$/g, ''),
      tilingScheme: new Cesium.GeographicTilingScheme({
        rectangle: new Cesium.Rectangle(
          -Math.PI / 2,
          Math.PI * 1.5,
        numberOfLevelZeroTilesX: 1,

      credit: '© Analytical Graphics, Inc.',

    provider.defaultAlpha = mapOpacity;