# Universal camera setTarget animation problem

**URL:** <https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856>\
**Category:** Questions\
**Created:** [July 26, 2020, 11:32am UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856 "2020-07-26T11:32:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mengu\_Gulmen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mengu_gulmen/32/8698_2.png) [@Mengu\_Gulmen](https://forum.babylonjs.com/u/Mengu_Gulmen)\
**Post date:** [July 26, 2020, 11:32am UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/1 "2020-07-26T11:32:47Z")

</div>

Hi everyone,

I managed to create a playground to demonstrate my problem.

> **[Babylon.js Playground](https://playground.babylonjs.com/#MG5H8Z)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

The spheres are pickable. when you click on one, the camera should have two animations. one that sets the target, and another that sets the position.

But when I click on the mesh, the camera first immediately sets the target and then animates the position. it doesn’t animate both properties together, it animates them consecutively.

I tried it with both

> scene.beginDirectAnimation(camera,[animCameraPosition,animCameraTarget], 0,100,false);

and

> scene.beginAnimation(camera, 0, 100, false, 1.0, function()

I feel like I’m missing something very simple but cannot find it 🙂

---

<div class="post-metadata">

**Author:** ![Blax](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blax/32/37851_2.png) [@Blax](https://forum.babylonjs.com/u/Blax)\
**Post date:** [July 26, 2020, 3:40pm UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/2 "2020-07-26T15:40:04Z")

</div>

please check you pg sample - it have error.

1. you need make detachControl for camera, during animation
2. try make like this (it work for me):

`
let cLT = new Animation("cLT", "lockedTarget", 60, Animation.ANIMATIONTYPE_VECTOR3, Animation.ANIMATIONLOOPMODE_CYCLE);
let tPos = (camera as TargetCamera).lockedTarget;
	keyFrames = [
		{frame: 0,value: lT.position},
		{frame: 180,value: tPos}
	];
cLT.setKeys(keyFrames);
camera.animations.push(cLT);
`

`// and start animation
scene.beginDirectAnimation(	camera,	camera.animations,0, 360, false,1,()=>{
console.log(‘all done’);
});
`

---

<div class="post-metadata">

**Author:** ![Mengu\_Gulmen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mengu_gulmen/32/8698_2.png) [@Mengu\_Gulmen](https://forum.babylonjs.com/u/Mengu_Gulmen)\
**Post date:** [July 26, 2020, 6:42pm UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/3 "2020-07-26T18:42:50Z")

</div>

sorry, I fixed the error:  
[https://playground.babylonjs.com/#MG5H8Z#1](https://playground.babylonjs.com/#MG5H8Z#1)

where in your code did you do detachControl? I couldn’t figure it out.

---

<div class="post-metadata">

**Author:** ![Mengu\_Gulmen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mengu_gulmen/32/8698_2.png) [@Mengu\_Gulmen](https://forum.babylonjs.com/u/Mengu_Gulmen)\
**Post date:** [July 26, 2020, 6:51pm UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/4 "2020-07-26T18:51:54Z")

</div>

I tried it with detachControl, nothing changed…

[https://playground.babylonjs.com/#MG5H8Z#2](https://playground.babylonjs.com/#MG5H8Z#2)

---

<div class="post-metadata">

**Author:** ![Blax](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blax/32/37851_2.png) [@Blax](https://forum.babylonjs.com/u/Blax)\
**Post date:** [July 26, 2020, 8:52pm UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/5 "2020-07-26T20:52:12Z")

</div>

[https://playground.babylonjs.com/#MG5H8Z#3](https://playground.babylonjs.com/#MG5H8Z#3)  
works as you need?

---

<div class="post-metadata">

**Author:** ![Mengu\_Gulmen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mengu_gulmen/32/8698_2.png) [@Mengu\_Gulmen](https://forum.babylonjs.com/u/Mengu_Gulmen)\
**Post date:** [July 26, 2020, 9:01pm UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/6 "2020-07-26T21:01:34Z")

</div>

No, the same thing is happening here too.

What I need is:

camera set target taking the same time with position change. so when the camera starts to move, the target slowly changes and arrives at the final point at the same time with the camera position.

what happens is:

set target plays first, then the camera position changes.

---

<div class="post-metadata">

**Author:** ![Blax](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blax/32/37851_2.png) [@Blax](https://forum.babylonjs.com/u/Blax)\
**Post date:** [July 27, 2020, 6:05am UTC](https://forum.babylonjs.com/t/universal-camera-settarget-animation-problem/12856/7 "2020-07-27T06:05:02Z")

</div>

no. Target animation also playing. Look: [https://playground.babylonjs.com/#MG5H8Z#4](https://playground.babylonjs.com/#MG5H8Z#4)  
i change easing function and speed - target animation play slowly.

Just play with easing settings for every animation