¿Can gsap an entire object or Vector3?

[MrMateo7]

Hi everyone!

Working on a threejs project, so I need to animate an group of values or some Vector3. In tween I used to do but with gsap it dont work, what I'm doing wrong?

There are two cases.

1. Is there any difference betwenn an array or an obj?

// as Array
const startValues = { a: 0, b: 10, c: 20 }
// as Obj
const startValues = [ 0, 10, 20 ]

// as Array
const endValues = { a: 20, b: 50, c: 40 }
// as Obj
const endValues = [ 20, 50, 40 ]

gsap.to(startValues, {
  endValues,
  onUpdate() {
    // How reach those values in both cases?
  },
  duration: 6
})

2.

const startValue = { a: new THREE.Vector3(0,0,0) }
gsap.to(startValue, {
  a: new THREE.Vector3(1,10,5),
  onUpdate() {
    console.log( this.targets()[0].a ) // Logs me [Object object]
  },
  duration: 6
})

Thanks for helping!

[OSUblake]

a would be an object on an object.

 

To tween a vector, just do this.

const v = new THREE.Vector3(0,0,0);

gsap.to(v, {
  x: 20,
  y: 50,
  z: 40,
  onUpdate() {
  	console.log(v);
  }
})

 

[MrMateo7]

4 minutes ago, OSUblake said:

a would be an object on an object.

 

To tween a vector, just do this.

const v = new THREE.Vector3(0,0,0);

gsap.to(v, {
  x: 20,
  y: 50,
  z: 40,
  onUpdate() {
  	console.log(v);
  }
})

 

 

The point is in many cases, I tween multiple vectors at the same time... I can't do that with gsap? I need to create one gsap for each vector?

const vectors = {
  a: new Vector3(...),
  b: new Vector3().copy( vector.from.other.js ),
  c: new Vector3( 0, value.from.anotherVector, 10)
}

 

[OSUblake]

If the endValues are different, then yes. If the end values are the same, then you can use an array of targets.

 

const endValue = new THREE.Vector3(20, 50, 40);

gsap.to([vector1, vector2, vector3], {
  ...endValue,
  onUpdate() {
    console.log(this.targets())
  }
});

 

[MrMateo7]

Ok, thanks! And can pass objects like this, and if this possible how get the values?

const startValues = [ 0, 10, 20 ]
const endValues = [ 20, 50, 40 ]

gsap.to(startValues, {
  endValues,
  onUpdate() {
    // How reach those values in both cases?
  },
  duration: 6
})

 

[GreenSock]

Yep, endArray handles that for you:

const startValues = [ 0, 10, 20 ]
const endValues = [ 20, 50, 40 ]

gsap.to(startValues, {
  endArray: endValues,
  onUpdate() {
    console.log(startValues.join(","));
  },
  duration: 6
})

Does that help?

[MrMateo7]

Sure, thanks!

And if I need to get separated values, for example...

...
onUpdate() {
  mesh.rotation.x = // First value?
  camera.position.y = // Second value?
  ...
}

 

[OSUblake]

In every gsap animation, the only thing that will ever change is the target i.e. the start values. 

 

We already showed how to get the values in your last thread.

 

const startValues = [ 0, 10, 20 ]
const endValues = [ 20, 50, 40 ]

gsap.to(target, {
  endArray: endValues,
  onUpdate() {
    console.log(startValues[0]);
    console.log(startValues[1]);
    console.log(startValues[2]);
  },
  duration: 6
})