Jump to content
GreenSock

MrMateo7

¿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!

Link to comment
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);
  }
})

 

Link to comment
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)
}

 

Link to comment
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())
  }
});

 

  • Like 1
Link to comment
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
})

 

Link to comment
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?

  • Like 1
Link to comment
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?
  ...
}

 

Link to comment
Share on other sites

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

 

 

  • Thanks 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.
×