Logic Machine Forum
Fading icon image - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Fading icon image (/showthread.php?tid=4197)

Fading icon image - Kilogica - 19.08.2022

Hello there,

is there a way to make two icons slowly fade instead of simply disappear?

For example: I have two leds icon each one of a color (red and blue) linked to a thermostat heat/cool function is it possible to make them slowly fade in/out when I switch mode? E.g. when I switch from cooling to heating the blue one slowly fade out and the red one slowly fade in.

Thanks

RE: Fading icon image - admin - 19.08.2022

One option is to use hue-rotate animation which will recolor your icon. In this case you need to use the same icon for both on/off state (red for this example). Set additional class to recolor

Custom CSS:
Code:
.recolor  {
  transition: filter 3s;
}
.recolor.on {
  filter: hue-rotate(-120deg);
}

Custom JS:
Code:
$(function() {
  $('.recolor').each(function(_, el) {
    var $el = $(el), addr = $el.data('object');
    
    if (addr) {
      grp.listen(addr, function(obj) {
        $el.toggleClass('on', obj.value);
      });
    }
  });
});


RE: Fading icon image - Kilogica - 19.08.2022

Thanks, it works very well.

That's a very smart solution.