GoJS Card Flipping Animation

Hi Guys, I am trying to achieve a card flipping effect on the node similar to this: https://codepen.io/elliempatten/pen/KxmoGR. However this CSS example requires wrapping the element being flipped in a

and I could not find a way to do this just for the node (currently the whole diagram is getting flipped).
I have also looked at GoJS Animations, but it does not seem to support the 3d rotations effect (the card flip would require a rotation on the y-axis). Are there anyways to work around this either using Animations or CSS?
The project is in React Typescript.

I believe that is correct – there is no easy way to do this currently. One way to do implement the flipping animation is to temporarily replace the node with an image of the node and then animate that instead of animating the actual node.

I’m curious what side-effects you might want to have during such an animation. If there are links connecting with the node that is flipping, should they be re-routing continuously to appear to connect to the moving sides of the node? If the node is a member of a group, at the edge of the group, should the group be continuously resizing during the animation? Should the layout responsible for positioning the node, if Layout.isRealtime is true or if it is the Diagram.layout, be continuously performing layouts because the node is changing size during the animation?

Also, the CodePen that you refer to shows completely different content in the flipped view. Is that what you want and how would you want to provide the contents for that alternative view?

Here’s a sample that appears to flip a Node by animating a Picture of the node.
But there’s no alternative content to show, so it just shows the original node.

In this sample I decided to answer “no” to all of the questions I posed to you above.

<!DOCTYPE html>
  <title>Horizontally Flipping Nodes</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
  <meta name="description" content="Animation to horizontally flip a node when the mouse enters it">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  At this time there is no alternative node to show on the "flip side" of the node.
  Instead it just shows the original node again.

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
      "undoManager.isEnabled": true

const FlipPart =
    { layerName: "Tool", pickable: false },
    $(go.Picture, { name: "PIC" }));
var FlipAnimation = null;
var FlipNode = null;

function startFlip(node) {
  if (node === FlipNode) return;
  if (FlipAnimation) FlipAnimation.stop();
  const pic = FlipPart.findObject("PIC");
  if (!pic) return;
  FlipNode = node;
  pic.element = node.diagram.makeImage({
    parts: new go.List([node])
  FlipPart.locationSpot = node.locationSpot;
  FlipPart.location = node.location;
  FlipAnimation = new go.Animation({
    duration: 250,
    reversible: true,
    finished: an => {
      const oldskips = node.diagram.skipsUndoManager;
      node.diagram.skipsUndoManager = true;
      node.opacity = 1;
      node.diagram.skipsUndoManager = oldskips;
  FlipAnimation.add(pic, "width", node.actualBounds.width, 0);
  FlipAnimation.addTemporaryPart(FlipPart, node.diagram);
  node.opacity = 0;

function stopFlip() {
  if (FlipAnimation) FlipAnimation.stop();
  FlipAnimation = null;
  FlipNode = null;
  if (FlipPart.diagram) FlipPart.diagram.remove(FlipPart);

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
      locationSpot: go.Spot.Center,
      mouseEnter: (e, node) => startFlip(node),
      mouseLeave: (e, node) => stopFlip()
      { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
      new go.Binding("fill", "color")),
      { margin: 8, editable: true },
      new go.Binding("text").makeTwoWay())

myDiagram.model = new go.GraphLinksModel(
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }

Thank you so much for the quick response. Regarding the questions you have asked, these are some very interesting thoughts which we will be putting into consideration. I will try with the suggestions you have made so far. Thanks again.