Heed

Thanks @OSUblake I thought I was missing something and it's super easy to do, GSAP is amazing. Thanks for your Help, Saved me a lot of time!

Hey everyone! I'm Looking to animate a three js model (in particle form) from one color to another in Hex or RGB. I've had a look around and haven't found anything in GSAP 3.x but it looks like ColorPropsPlugin did this? Does GSAP 3.x have something similar? or am I mistaken. https://greensock.com/docs/v2/Plugins/ColorPropsPlugin //gets var color = myObject.lineColor(); //sets myObject.lineColor("rgb(255,0,51)"); //tweens TweenLite.to(myObject, 1, {colorProps:{lineColor:"rgb(102,255,51)"}, ease:Linear.easeNone}); I just need to be able to add a starting color and a ending colors and it puts out the right in-between colors during the animation. Which I will then push to: new THREE.Color( outputColor ) Any help would be great! Thanks.

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 https://codepen.io/naniio/pen/oNbvQdO Seems a lot cleaner to me now!

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!

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.