Dynamic changing .to props and switching 3D models

[Heed]

Hey Everyone! So I'm 100% new to Tweening, GSAP and this forum, I have a board game I'm making in Three.js and I need to animate a piece moving one square (with an a flip animation) over and over again, the path the pieces take is set (unless it gets knocked off the board, then it's back to the start) so I know the exact to and from positions. The to and from positions and the direction and the direction of the flip need to be dynamic since the piece and it's location changing every turn. I need to have dynamically changing timeline, I plan to use the same animation timeline for every piece, so even the model has to be dynamic, I have come up with using a function to create a timeline on execution and then to run that timeline, each time the function is ran it overwrites the old timeline. The index of each piece is stored in an array (will be a database in the end), My codepen is far from tidy and the code is messy but it seems to work,  is there a better way to do this? is what I've done a terrible idea? 

 

Note: there is only 2 pieces on the codepen for testing there will be much more once done. Move pattern is 4 left, 1 up, 7 right, 1 down, 1 left. 

 

Any comments, ideas, help would be great!

 

Thanks.

See the Pen jObjbwx by naniio (@naniio) on CodePen

[ZachSaucier]

Hey Heed and welcome to the GreenSock forums!

 

If you need the start and end to by dynamic, why do you feel like you need to reuse the same timeline each time? I could be misunderstanding your goals, but this is how I think I would approach the situation:

• Create an animation for each piece going from one space to the space next to it in any of the 4 directions. So you have 4 animations associated with each piece (if all the pieces move in the same way you just need a function that applies the animation to a piece, you don't have to save each animation in memory).
• Somehow create the path that you want pieces to take to go from space A to space B. Not sure how your game works, but I'm sure you can come up with a way to do that. I might try and store the positions in an array for easy linear access.
• Based on where the piece is and which direction it needs to go, play the animation to get to that space. Repeat for however many spaces it needs to go.

I hope that helps. I'm not quite sure what you're wanting from us otherwise  

[Heed]

20 hours ago, ZachSaucier said:

Hey Heed and welcome to the GreenSock forums!

 

If you need the start and end to by dynamic, why do you feel like you need to reuse the same timeline each time? I could be misunderstanding your goals, but this is how I think I would approach the situation:

• Create an animation for each piece going from one space to the space next to it in any of the 4 directions. So you have 4 animations associated with each piece (if all the pieces move in the same way you just need a function that applies the animation to a piece, you don't have to save each animation in memory).
• Somehow create the path that you want pieces to take to go from space A to space B. Not sure how your game works, but I'm sure you can come up with a way to do that. I might try and store the positions in an array for easy linear access.
• Based on where the piece is and which direction it needs to go, play the animation to get to that space. Repeat for however many spaces it needs to go.

I hope that helps. I'm not quite sure what you're wanting from us otherwise  

 

Hey Zach, Thanks for the welcome and the reply, everything you have said makes a lot of sense and is way simpler than my way, with "you just need a function that applies the animation to a piece" I'm not really understanding how you change the target for the animation with GSAP so take this .to() it targets the current model, how do I change this when I need to? I have 14 models that need use of the animation. 

 

 tl.to(model.position, {duration: 0.3, y: 0.85}, 0);

I'm also a little unclear on how to play the animations, say I need to move 4 spaces : left, left, left, up (and I have animation for all) I've been using the onComplete function to chain the movements after each other is there a better way bearing in mind it will always be a different amount of moves and directions. 

 

Thanks for all the help, I'm surprised someone made sense of my messy code and "question". I can see I have approached this in a wrong way, which is why I asked this question in the first place. Thanks Again!

[ZachSaucier]

5 minutes ago, Heed said:

with "you just need a function that applies the animation to a piece" I'm not really understanding how you change the target for the animation with GSAP so take this .to() it targets the current model, how do I change this when I need to?

Something like this:

function goLeft(elem) {
  return gsap.to(elem, {x: -elemWidth, ease: "none"});
}
// Do same thing for other directions...

 

6 minutes ago, Heed said:

I'm also a little unclear on how to play the animations, say I need to move 4 spaces : left, left, left, up

Something like this:

function playMoves() {
  // Assuming moves is an array of objects with a direction and element
  moves.forEach(move => {
    if(move.direction === "left") {
      goLeft(move.elem);
    } // do same thing for each direction
  });
}

This is of course pseudo-code  

[Heed]

On 6/2/2020 at 4:05 AM, ZachSaucier said:

Something like this:

function goLeft(elem) {
  return gsap.to(elem, {x: -elemWidth, ease: "none"});
}
// Do same thing for other directions...

 

Something like this:

function playMoves() {
  // Assuming moves is an array of objects with a direction and element
  moves.forEach(move => {
    if(move.direction === "left") {
      goLeft(move.elem);
    } // do same thing for each direction
  });
}

This is of course pseudo-code  

 

 

Thanks again for the help! I have changed my code to work with the 1 step directions,  as for the for-each function doesn't it just overwrite all the moves, only preforming the last one? this is the code I have now 

See the Pen oNbvQdO by naniio (@naniio) on CodePen

 Seems a lot cleaner to me now!

[ZachSaucier]

2 minutes ago, Heed said:

as for the for-each function doesn't it just overwrite all the moves, only preforming the last one?

Your right, in my pseudo-code it would have that issue. But you could use onComplete to chain them like you're doing in your demo. Or you could add them to a timeline instead of just having a regular tween.