tweenjs / tweenjs/tween.js

tween jumps (jitters) to the final value at the end of animation

Open
#116 27 comments 0 reactions 0 assignees View on GitHub

@trusktr is already working on this.

Since Aug 2, 2021.

  • #619 by @trusktr — open
Bug
Dominant language
TypeScript
Stars
10.1k
Forks
1.4k
PR merge metrics
No merged PRs in 30d

Description

Hi, thanks for this great lib its really useful!

But i've fallen into some trouble that i cant figure out. Within my three.js scene i have camera and avatar objects in a container object that is moved with my controller. On collision with another object in my scene the camera is meant to tween back and up slightly but instead of any animation it just jumps to the finished position.

This only happens while the avatar is being moved, if i initiate the tween straight away when the avatar isn't being moved the animation runs fine.

Is anybody aware of what might be causing this? and a possible fix? I'm truly stumped

This is the tween setup code i'm using incase its just a simple setup issue i've missed:

    var camPosition = { x : 0, y : 5, z : 50 };
    var camTarget1 = { x : 0, y : 10, z : 75};

    tweenCamToOrig = new TWEEN.Tween(camTarget1)
    .to(camPosition, 2000)
    .easing( TWEEN.Easing.Back.InOut )
    .onUpdate(function(){
        camera.position.x = camPosition.x;
        camera.position.y = camPosition.y;
        camera.position.z = camPosition.z;
    })
    .onComplete(function(){
    });

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no repository files or tests; begin by reproducing the supplied camera tween while the avatar or container is moving and compare it with the stationary case. Review the tween setup and open pull request #619; done means the end-of-animation jump is explained and corrected without breaking the stationary animation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, three.js, typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.