Fade-out effect for removed htmlElements / labels?

[kirkcola]

Hi! I’m trying to add a fade-out effect for htmlElements when they are dynamically removed during updates to htmlElementData. Currently, when elements are removed, they simply disappear abruptly.

I’ve tried modifying the opacity using the htmlElementVisibilityModifier and keeping the htmlElement reference stable, but nothing seems to work solidly, and the elements are still disappearing instantly without any smooth transition.

I wonder if it is something that can be achieved through a hack or workaround to the three.js, or should I submit a feature request?

Thanks!

[vasturiano]

@kirkcola thanks for reaching out.

As soon as you remove an element from the system, by updating .htmlElementsData, it will disappear at once so whatever style changes you make after that time will not be shown.

So what you can do in this case is "delay" the element removal until the fade out effect has had time to run its course.

Here is a somewhat loose example of how this could work for fading-out elements on click:

myGlobe.htmlElement(elData => {
  const el = document.createElement('div');
  ...
  el.style.transition = 'opacity 250ms';
  el.onclick = () => {
    el.style.opacity = 0;
    setTimeout(
      () => myGlobe.htmlElementsData(myGlobe.htmlElementsData().filter(d => d !== elData)),
      250
    );
  };
  return el;
})

[kirkcola]

@vasturiano Thank you so much for your detailed reply! Delaying the element removal and simulating onclick worked perfectly for me.

I hadn't considered triggering style changes through onclick. I was focused on trying to control the animation with a data + callback approach, but it seemed to trigger element repaint constantly.

Really appreciate your help!