GSAP and Threejs jerky tweens

[Creativist-Lab 18 Likes (Newbie)]

Hey everyone, I'm having trouble with getting my animations onclick running smooth. I did some research on the forum and found some threads which I tried but unfortunately it doesn't solve my issue. The following thread I tried:

The code I tried is the following:

/* Model Parts Positioning */
/*function modelPositionRail(){

const animatedModel = activeModel;  
gsap.to(camera.position, { duration: 1.5, x:-0.05, z: 0.75, ease: "power2.in" });
}

function modelPositionTop(){

const animatedModel = activeModel;
gsap.to(camera.position, { duration: 1.5, x:-1.5, ease: "power2.in" });
}

function modelPositionBottom(){

const animatedModel = activeModel;
gsap.to(camera.position, { duration: 1.5, x:1.5, y: 0.75, ease: "power2.in"});
}

function modelPositionFins(){

const animatedModel = activeModel;
gsap.to(camera.position, { duration: 1.5, x:0, z:1.5, ease: "power2.in"});
}*/

and

/* Model Parts Positioning */
/*function modelPositionRail(){

const animatedModel = activeModel;
  gsap.to( camera, {
	duration: 2,
	zoom: 2,
	onUpdate: function () {
	
		camera.updateProjectionMatrix();	
	}
} );
  
gsap.to(controls.target, { duration: 1.5, x:-0.05, ease: "power2.in", onUpdate: function () {
		controls.update();
}
});
}


function modelPositionTop(){
  const animatedModel = activeModel;
    gsap.to( camera.position, {
	duration: 1.5,
  y: 900,
	onUpdate: function () {	
		camera.updateProjectionMatrix();	
	}
} );

gsap.to(controls.target, { duration: 1.5, x:0.15, ease: "power2.in", onUpdate: function () {
		controls.update();
}
  });
}

function modelPositionBottom(){

const animatedModel = activeModel;
gsap.to(camera, { duration: 1.5, x:1.5, zoom: 2, ease: "power2.in"});
}

function modelPositionFins(){

const animatedModel = activeModel;
gsap.to(camera.position, { duration: 1.5, x:0, z:1.5, ease: "power2.in"});
}
*/

 But the results are kinda similar.

Here: Board Configurator2 | Boardschmiede Custom Shaped Kiteboards (creativist-lab.com) you can see it 'working' especially on mobile devices it doens't look good but also on a desktop it doesn't run smooth most of the times. The idea is when you press one of the customize buttons that the model focuses on the part that will change.

 

Hope fully it's clear and sorry for not providing a pen but I figured with the GSAP code provided and the working example that hopefully someone is able to help.

 

Thanks in advance!

 

Any pointers in what I'm doing wrong or can do would be great as I've been busy with it for quite some time now

[SteveS 177 Likes (Specialist)]

Does it work if you remove the orbit controls functionality? It's more than likely you have a conflict between your controls and your animation. Probably best to disable controls while animating and then when the animation completes set the controls to the final position.

Also, you are updating the projection matrix in areas that I wouldn't expect you need to. In modelPositionTop you shouldn't need to update the projectionMatrix as you are only animating the camera position.

[Creativist-Lab 18 Likes (Newbie)]

Thanks a million @SteveS, looks like you are right! I now have to redo some of the animations because the positions became different but that is probably because of the conflict. But if I understand you correct, when I found the proper positions I can enable Orbitcontrols again?

 

About this:

42 minutes ago, SteveS said:

Also, you are updating the projection matrix in areas that I wouldn't expect you need to. In modelPositionTop you shouldn't need to update the projectionMatrix as you are only animating the camera position.

That is also what I thought but I found another working example in which they used this so that's why I tried.

 

Anyway thanks a lot, I was struggling for quite some time so very happy with your help!

[SteveS 177 Likes (Specialist)]

When the animation starts, disable the controls. On complete, re-enable them and if you have to retarget then do it then. Not sure exactly how I would do it but it should work fairly seamlessly.

A little more googling led me to this post: https://discourse.threejs.org/t/tweening-with-orbitcontrols/17356

 

Looks like you can call controls.update() once you re-enable to ensure the controls line up as expected.

[Creativist-Lab 18 Likes (Newbie)]

Thank you, I will give it a go!

 

[Creativist-Lab 18 Likes (Newbie)]

@SteveS that all works perfectly, thanks once again!