Simultaneous animations

[mokargas]

Is it possible to have something like FOV (I guess it's called Zoom in the camera-controls concept) and movement happen at the same time

e.g

controlsRef.current.moveTo(0,0,0, false)
controlsRef.current.zoom(1, false)

// Function doesn't exist - just a contextual example
await controlsRef.current.moveToWhileZooming(<position>, <targetZoom>, true)

I'm trying to perform a cinematic zoom while moving using the controlsRef

I could try updating the FOV directly, with say GSAP

    gsap.timeline({ paused: true }).fromTo(
      camera,
      {
        fov: 110,
      },
      {
        fov: 75,
        duration: 0.5,
        ease: "power3.in",
        overwrite: true,
      }
    )
  );
  

However, it seems controls will ignore this, even if it runs simultaneously.

[makc]

you need something like onUpdate: () => { camera.updateProjectionMatrix() } in order for FOV tween to have any effect

[mokargas]

Yes, this is one thing I tried. Strange results occur.

[yomotsu]

Basically, camera-controls controls camera-related params, if you use camera-controls. (like React ignores law DOM manipulations)
therefore, camera-controls may ignore gsap animation of camera itself as long as you use camera-controls.

If you wish to animate fov, try setting the fov via camera-controls's zoom.

[mokargas]

I'm aware of animating camera control's zoom. The gsap psuedo-code was me trying to animate the "zoom" outside of camera-controls because I see no way of doing both move and zoom simulatenously.

My original question asks about animating it at the same time as moving. I want to zoom and move simultaneously, not await one after the other.

The sequence I'm trying to achieve is this

1. Move and zoom at the same time, using transition. E.g starting at Zoom = 1, animating to zoom = 2 at the same time as moving from say 0,0,0, to 0, 10, 0
2. Rotate to some point

[mokargas]

BTW, this is called a "Dolly Zoom" or alternatively a "vertigo effect" in cinematography.

[yomotsu]

Thanks for elaborating.
I think you can call functions at the same time, like

await Promise.all([
    cameraControls.zoom( .8, true ),
    cameraControls.dolly( - 1, true ),
])

Is this what you are looking for?
I think it's better to have the "vertigo effect" method in camera-controls though.