GTLF Three.js with Gsap not in sync

[JohneeMac]

Hi,

 

Been experimenting with Gsap over the last day or 2, and had some fun. The possibilites seem endless, especially with  three.js.

 

But i'm stuck.

 

Excuse my newbie js skills, i have a lot to learn....  clearly!

 

Ok, I can get the GTLF imported ok and animated but it's not working correctly.

 

I want the animation to play upon load, and then on hover - go back to the original position and then pause. Upon coming out of hover then restart the animation from the off.

 

Upon load it works and the animation runs. On hover it works, the 3 blocks return to the original location. But on restart from original position its very buggy and the whole animation becomes out of sync.

 

I think the part i'm not getting right is below, ideally they should be declared once?

 

var redShape = scene.getObjectByName("Red");
var greenShape = scene.getObjectByName("Green");
var blueShape = scene.getObjectByName("Blue");

 

I've tried, kill, restart, destroy, dozens of things but no luck so far.

 

Help greatly apprecated. JM.

 

See the Pen zYwPqKG by johneemac (@johneemac) on CodePen

[OSUblake]

Hi Johnee!

 

1 hour ago, JohneeMac said:

I think the part i'm not getting right is below, ideally they should be declared once?

 

var redShape = scene.getObjectByName("Red");
var greenShape = scene.getObjectByName("Green");
var blueShape = scene.getObjectByName("Blue");

 

It doesn't matter. It will return the same object. Adding it to a variable doesn't create a new one. So use it where ever it makes the most sense. But of course you have to wait for gtlf object to load before using it.

 

var redShape1 = scene.getObjectByName("Red");
var redShape2 = scene.getObjectByName("Red");

console.log("SAME OBJECT", redShape1 === redShape2) // true

You shouldn't use new.

// BAD
var cloudTl = new gsap.timeline({repeat:-1, yoyo: true});

// GOOD
var cloudTl = gsap.timeline({repeat:-1, yoyo: true});

 

You just also use GSAP ticker's instead of requestAnimationFrame. That helps keep stuff in sync with GSAP animations.

 

init();
// animate();

...

// function animate() {
//   requestAnimationFrame( animate);
//   renderer.render( scene, camera );
// }

gsap.ticker.add(() => {
  renderer.render( scene, camera );
});

 

Tweens don't have a position parameter.

// BAD
gsap.to(redShape.position, 1, { x: 0, y: 0, z: 0 }, 0);

// GOOD
gsap.to(redShape.position, 1, { x: 0, y: 0, z: 0 });

 

Eases have a simpler string format.

cloudTl.to(redShape.position, 1, { x: 4, ease: "none" }, 0);

 

It might help to go through our getting started and migration guide.

 

And is there any reason you are using the global timeline? 

function jkill() {
  gsap.globalTimeline.pause();
}

function gooy() {
  gsap.globalTimeline.play();
  startAnimatingBlocks();
}

 

Generally, I would advise against that. The problem is that you have you're creating the same animations over and over again when you hover in and out, so they are going to be conflicting with each other.

 

The simplest solution would be to just create a single animation and then reverse it. It's a little more complicated because you have an infinitely yoyoing animation, but all the methods I used are covered in the Timeline docs.

 

function onEnter() {  
  animation.time(animation.time() % duration).reverse().timeScale(-2);
}

function onLeave() {
  animation.play().timeScale(1);
}

 

See the Pen MWmOJzv by GreenSock (@GreenSock) on CodePen

 

 

 

 

[JohneeMac]

Brilliant answer, thanks!

 

I've got a lot of learning to do.