Animate icon in GoJS

Question

I have a graph with nodes that contains icons:

$(go.TextBlock, {
  font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
  margin: new go.Margin(0, 5, 0, -34),
},
  new go.Binding('text', 'statusIcon')),

I would like to rotate statusIcon infinitly but only if statusIcon matchs a value.

I have looked how to add a css rule like this.

font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',      
margin: new go.Margin(0, 5, 0, -34),animation:'spin 4s linear infinite';

But I get an error

Trying to set undefined property "animation" on object: TextBlock

I suppose that only few css rules are accepted by gojs TextBlock.

How can I add animation to only a node sub element ?

Answer 1

I created a StackBlitz example here.

$(go.TextBlock, {
  font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
  margin: new go.Margin(0, 5, 0, -34),
},
  new go.Binding('text', 'statusIcon'),
  new go.AnimationTrigger("angle")),

animate() {
    this.dia.commit(diag => {
      var node = this.dia.nodes.first();
      var textblock = node.findObject("TEXTBLOCK_TO_ROTATE");
      textblock.angle = textblock.angle + 30;
    });
  }

Animation is not a property like you used above. If you want to rotate, you should use AnimationTrigger and angle property for that.
I made a simple example to use GoJS animation, you can apply the codes from node template of TextBlock and the method to animate as you wish.

For more information, you can follow the description and the examples here.