Search In
• More options...
Find results that contain...
Find results in...

# ¿Can gsap an entire object or Vector3?

## Recommended Posts

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!

##### Share on other sites

`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);
}
})```

##### Share on other sites

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)
}```

##### Share on other sites

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())
}
});```

• 1
##### Share on other sites

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
})```

##### Share on other sites

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?

• 1
##### Share on other sites

Sure, thanks!

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

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

##### Share on other sites

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

```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
})```

• 1