Change in layout offsetting path animation

Hi,
I have been trying out different layout in the path animation sample (Concept Map with animation along paths) is there a way to make the path animation along the links even when there are changes in the layout style.
I am trying out the GridLayout and also positioning it manually. Both of them proved to offset the pathanimation.
MicrosoftTeams-image (4)

token.location = link.path.getDocumentPoint(link.path.geometry.getPointAlongPath(frac, temp));

This should determine the animation path using the Point class but I dont quite understand why there is an offset when the layout is changed

I just tried modifying that sample while it was running – changing its Diagram.layout and all of the Link.routing and Link.curve vaues. Everything worked as I think you would expect.

Could you please tell us how to reproduce the problem in that sample?

Yes, I was able to reproduce the same problem through trail and errors.

I removed the layout from go.Diagram

myDiagram =
      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        {
          initialAutoScale: go.Diagram.Uniform,  // an initial automatic zoom-to-fit
          contentAlignment: go.Spot.Center,  // align document to the center of the viewport
          "undoManager.isEnabled": true
        });

and removed all tokens and only kept the green one

myDiagram.model.addNodeDataCollection([
      { category: "token", at: 1, color: "green" },
    ]);

and removed one node and all its links

    var nodeDataArray = [
    { key: 1, text: "Concept Maps" },
    { key: 2, text: "Organized Knowledge" },
    { key: 3, text: "Context Dependent" },
    { key: 4, text: "Concepts" },
    { key: 5, text: "Propositions" },
    { key: 6, text: "Associated Feelings or Affect" },
    { key: 7, text: "Perceived Regularities" },
    { key: 8, text: "Labeled" },
    { key: 9, text: "Hierarchically Structured" },
    { key: 10, text: "Effective Teaching" },
    { key: 11, text: "Crosslinks" },
    { key: 12, text: "Effective Learning" },
    { key: 13, text: "Events (Happenings)" },
    { key: 14, text: "Objects (Things)" },
    { key: 15, text: "Symbols" },
    { key: 16, text: "Words" },
    { key: 17, text: "Creativity" },
    { key: 18, text: "Interrelationships" },
    { key: 19, text: "Infants" },
    ];
    var linkDataArray = [
    { from: 1, to: 2, text: "represent" },
    { from: 2, to: 3, text: "is" },
    { from: 2, to: 4, text: "is" },
    { from: 2, to: 5, text: "is" },
    { from: 2, to: 6, text: "includes" },
    { from: 2, to: 10, text: "necessary\nfor" },
    { from: 2, to: 12, text: "necessary\nfor" },
    { from: 4, to: 5, text: "combine\nto form" },
    { from: 4, to: 6, text: "include" },
    { from: 4, to: 7, text: "are" },
    { from: 4, to: 8, text: "are" },
    { from: 4, to: 9, text: "are" },
    { from: 5, to: 9, text: "are" },
    { from: 5, to: 11, text: "may be" },
    { from: 7, to: 13, text: "in" },
    { from: 7, to: 14, text: "in" },
    { from: 7, to: 19, text: "begin\nwith" },
    { from: 8, to: 15, text: "with" },
    { from: 8, to: 16, text: "with" },
    { from: 9, to: 17, text: "aids" },
    { from: 11, to: 18, text: "show" },
    { from: 12, to: 19, text: "begins\nwith" },
    { from: 17, to: 18, text: "needed\nto see" },
    ];

Can you try this configuration and check. If not try removing more nodes.

Thanks. We can reproduce the problem. Sorry about that – we’ll try to fix this soon.

This has been fixed and will be out with the next release.

As a workaround for this particular sample, if you disable the initial animation (set "animationManager.isInitial":false) it should avoid the problem.

Thank you for your valuable support. This solved the problem for me.