animations in Autodesk Platform Services | Autodesk Forge

I am trying to create an animation in autodesk forge. but every time I create it by different means I get the same error.

The problem is that getFragmentProxy is not found. Since I am trying to implement the following tutorial:

https://aps.autodesk.com/blog/know-how-complex-component-transformations-viewer-part-1-basics

Searching the internet I find a person with the same problem. Below I leave the link to the answer.

https://stackoverflow.com/questions/63369599/typescript-definitions-for-forge-viewer-missing-getfragmentproxy

In this one he gives multiple answers but none of them worked for me. Reading a little I could find that it may be because of @types issues but even though I did the SDK configuration and putting the type paths I have not been able to solve the problem.

So my question is. What is the best way to solve this problem or what tutorial could I follow to make animations in autodesk forge since many I think are discontinued. Thank you very much

I am attaching images below

enter image description here

{
  "compileOnSave": false,
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [ "forge-viewer"],
    

  },
  "exclude": [
      "node_modules"
    ],
    
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

The blog post is from 2017 but the code there should still be working as expected. Just make sure that you're not trying to animate the fragments "too early". The geometry data is loaded over time, and for complex models it may take a while, so you should wait until all geometries are available, for example, by listening to the Autodesk.Viewing.GEOMETRY_LOADED_EVENT.

Here's a simplified version of a utility function that will shift a specific object by given deltas:

function moveObject(viewer, model, dbId, dX, dY, dZ) {
    const tree = model.getInstanceTree();
    tree.enumNodeFragments(dbId, function (fragId) {
        const frag = viewer.impl.getFragmentProxy(model, fragId);
        frag.getAnimTransform();
        frag.position.x += dX;
        frag.position.y += dY;
        frag.position.z += dZ;
        frag.updateAnimTransform();
    }, true);
}

To test it out, go to https://aps-simple-viewer-nodejs.autodesk.io/#dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6cGV0cmJyb3otc2FtcGxlcy9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0, and try pasting the following code in the console:

NOP_VIEWER.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (ev) {
    function moveObject(viewer, model, dbId, dX, dY, dZ) {
        const tree = model.getInstanceTree();
        tree.enumNodeFragments(dbId, function (fragId) {
            const frag = viewer.impl.getFragmentProxy(model, fragId);
            frag.getAnimTransform();
            frag.position.x += dX;
            frag.position.y += dY;
            frag.position.z += dZ;
            frag.updateAnimTransform();
        }, true);
    }

    const viewer = ev.target;
    const model = ev.model;
    viewer.setProgressiveRendering(false); // Disable progressive rendering to avoid blinking during animation
    const dbids = viewer.getSelection();
    if (dbids.length === 1) {
        viewer.select([]);
        setInterval(function () {
            moveObject(viewer, model, dbids[0], 0, 0, 1.0);
            viewer.impl.invalidate(true, true);
        }, 100);
    }
});

Now, whenever you select any design element, it'll start moving upwards in 100ms intervals.