Heed Posted June 17, 2021 Share Posted June 17, 2021 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. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted June 17, 2021 Solution Share Posted June 17, 2021 Just tween it. GSAP recognizes color values. See the Pen KKWEKKv by GreenSock (@GreenSock) on CodePen And if you need to split the color into components, there's a util for that. https://greensock.com/docs/v3/GSAP/UtilityMethods/splitColor() 4 Link to comment Share on other sites More sharing options...
Heed Posted June 17, 2021 Author Share Posted June 17, 2021 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now