Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Creativist-Lab

GSAP and Threejs jerky tweens

Go to solution Solved by SteveS,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Thank you, I will give it a go!

 

  • Like 2
Link to comment
Share on other sites

@SteveS that all works perfectly, thanks once again!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×