# Camera or Model jumping after tween finishes

**URL:** https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593
**Category:** Questions
**Tags:** tweenjs
**Created:** [June 27, 2020, 8:46am UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593 "2020-06-27T08:46:51Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)
#### Post date: [June 27, 2020, 8:46am UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/1 "2020-06-27T08:46:51Z")

</div>

So a few days ago I asked about making orbit controls zoom in and out I managed to get the camera to do this but now I face a new problem.  
The new problem is after the camera and controls finish tweening the camera (or it might be the model) jumps a little does anyone know why and what is causing this?

What I have tried:  
I thought it might be object.lookAt so I tried this:

```
var startRotation = new THREE.Euler().copy( camera.rotation );
camera.lookAt( controls.object.position );
var endRotation = new THREE.Euler().copy( camera.rotation );
camera.rotation.copy( startRotation );
new TWEEN.Tween(camera.rotation).to({x: endRotation.x, y: endRotation.y, z: endRotation.z}, 600).start();

```

Didn’t work so then I thought well maybe it’s object.position or object.zoom so I tried this:

```
	var tweenPositionToReset = new TWEEN.Tween( controls.object.position )
    .to( { x: controls.position0.x, y: controls.position0.y, z: controls.position0.z }, 1000 )
    .easing(TWEEN.Easing.Quadratic.InOut)
     .onComplete(function() {
                })
    .start();
    
var tweenPositionToReset3 = new TWEEN.Tween( controls.object.zoom )
    .to( { x: controls.zoom0.x, y: controls.zoom0.y, z: controls.zoom0.z }, 1000 )
    .easing(TWEEN.Easing.Quadratic.InOut)
     .start();

```

That didn’t work

Has anyone got any idea’s to how to solve this?

bandicam 2020-06-27 09-44-57-322

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/59a4f2f9d2e66972f43eff6bd9173f0979a73917.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/59a4f2f9d2e66972f43eff6bd9173f0979a73917.mp4)

Here is a codepen there is a white button right in the top Left to reset the scene (hard to see):  
https://codepen.io/uiunicorn/embed/preview/ExPvoeQ?height=300&slug-hash=ExPvoeQ&default-tabs=js,result&host=https://codepen.io

Thanks in advance!

Edit: the above video of the problem doesn’t show up so if that’s the same for anyone else here is the problem in youtube format: [https://www.youtube.com/watch?v=ns\_JHwpf7uk](https://www.youtube.com/watch?v=ns_JHwpf7uk)

---

<div class="post-metadata">

### Author: ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)
#### Post date: [June 27, 2020, 5:57pm UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/2 "2020-06-27T17:57:35Z")

</div>

I’m starting to wonder if this is a glitch with tween js ? I’ve tried a few other things and still the same outcome is it possible this is a bug from tween js?

---

<div class="post-metadata">

### Author: ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)
#### Post date: [June 30, 2020, 7:06am UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/3 "2020-06-30T07:06:49Z")

</div>

Still struggling on this anyone have any idea’s?

---

<div class="post-metadata">

### Author: ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)
#### Post date: [June 30, 2020, 10:27am UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/4 "2020-06-30T10:27:01Z")

</div>

I never have problems with tweening.  
See these examples, specifically the tweening code.

Nested tweens

> **[Threejs Tween Bouncing Cube - CodeSandbox](https://codesandbox.io/s/threejs-tween-bouncing-cube-3ipyy?file=%2Fsrc%2Fclient%2Fclient.ts)**
>
> Threejs Tween Bouncing Cube by Sean-Bradley using @types/dat.gui, @types/express, express, three, typescript

Tweening an animated GLTF  
[https://sbcode.net/threejs/tween-animation-mixer/](https://sbcode.net/threejs/tween-animation-mixer/)  
You can view the source of this example at [https://sbcode.net/extra\_html/tween-animation-mixer.html](https://sbcode.net/extra_html/tween-animation-mixer.html)

And also see my page showing the different tween easing options  
[https://sbcode.net/threejs/tween/#tween-easing-options](https://sbcode.net/threejs/tween/#tween-easing-options)

---

<div class="post-metadata">

### Author: ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)
#### Post date: [June 30, 2020, 5:05pm UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/5 "2020-06-30T17:05:03Z")

</div>

Could you take a look at my pen I can’t see what I am doing wrong

---

<div class="post-metadata">

### Author: ![kiwicoder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kiwicoder/32/22567_2.png) [@kiwicoder](https://discourse.threejs.org/u/kiwicoder)
#### Post date: [December 2, 2021, 8:11am UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/6 "2021-12-02T08:11:00Z")

</div>

Hi,

Did you manage to solve this glitching effect in Tween?  
I am experiencing the same issues and it looks like it’s resetting the controls.target of the orbit controls to 0,0,0.

Hopefully you can help me out with this!

Best,

---

<div class="post-metadata">

### Author: ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)
#### Post date: [January 1, 2022, 5:21pm UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/7 "2022-01-01T17:21:02Z")

</div>

In the end I ended up using gsap much more efficient and less issues basically does what you tell it to unlike tween

---

<div class="post-metadata">

### Author: ![CHOIX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/choix/32/294_2.png) [@CHOIX](https://discourse.threejs.org/u/CHOIX)
#### Post date: [June 2, 2022, 1:29pm UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/8 "2022-06-02T13:29:41Z")

</div>

I got the same behaviour.

---

<div class="post-metadata">

### Author: ![cidwings](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cidwings/32/12546_2.png) [@cidwings](https://discourse.threejs.org/u/cidwings)
#### Post date: [August 1, 2023, 1:21pm UTC](https://discourse.threejs.org/t/camera-or-model-jumping-after-tween-finishes/16593/9 "2023-08-01T13:21:49Z")

</div>

Same problen gsap TWEEN tween

right after gltf animation the camera do a jump
