Gsap Animation - Speckle viewer

Hi!

im using Docs - GreenSock to create an animation in the Speckle viewer.

It works fine but im only able to see the animation while the caramara is rotating, if its not moving the animation will not show.

any ideas on why or how it should be implemented ?

mi code looks something like this


    const v = get(speckleViewer).speckleViewer;
    const spheres = get(currentMarkers);
    if (spheres.length>0) {
      //requestAnimationFrame(animateSphereMarkers);
      let _updatedSpheres = []
      spheres.forEach(sphere => {
        if (rad <= maxRad && opa >= 0.05) {
          console.log(sphere);
          gsap.to(sphere.scale,{x:3, y:3, z:3, duration:2, repeat:-1})
          gsap.to(sphere.opacity,{opacity:0, duration:2, repeat:-1})

        }
        _updatedSpheres.push(sphere);
      });
      currentMarkers.set(_updatedSpheres);
      // @ts-ignore
      v.needsRender = true;
      // @ts-ignore
      v.render();
    }

what im getting right now
imgur.com/a/Ui2oGZX

1 Like

Hi @Ricardo_Zepeda

Interesting use case! What viewer version are you currently using?

Hello @alex thanks for the reply, im on “@speckle/viewer”: “^2.8.3-alpha”,
i tried with requestAnimationFrame and it works not sure how to make it work with gsap tho.

Hi @Ricardo_Zepeda

I would strongly suggest updating to version 2.9.0 which holds the new viewer implementation and API. The documentation is here.
The version you are currently on is what is known as the “old” viewer. Starting with 2.9 the viewer went through a big rework on all levels. Moving forward we will continue to build upon the 2.9 foundations. Please note that after updating you might see some breaking changes.

Regarding your original question, I see you explicitly call the viewer’s render function. You don’t need to do that. The viewer runs it’s own update/render loop. You can however run your own update loop in parallel if you have the need. Currently the viewer does not expose any explicit callbacks or events for when the viewer is rendering/updating but we will add such mechanisms in the future. If you update to ver 2.9, you won’t need to do anything in order to signal a re-render of the viewer since that version is using continuous rendering. This however will change in future updates, the API will have proper mechanisms for requesting a render along with update/render hooking.

2 Likes

Solution to this is here

2 Likes