matt hew

@OSUblake - Ahh, sorry yes. I thought that wasn't going to be the most optimum way. Thanks! ☺️

@GreenSock & @mikel - thanks for the pens! ? I'll see if I can integrate your ideas into my project. @GreenSock - "I'd strongly recommend against animating to a generic "transform" property value." - Are you saying not to use "left, right, top, bottom"?

@elegantseagulls - I didn't think of that, Thanks for your advice! I'll try give that a go. ? I've created a new pen of how far (or not far) I got with my efforts. I actually nabbed the random-ness code from here. It's become a bit of a frankenstein but this is just an illustration of what I'm trying to achieve. https://codepen.io/-matt-hew-/pen/JjOpMEY

Hi, I'm new to Greensock and I'm still figuring out how to do stuff. I have a question about how you could implement a certain animation. I created a demo codepen so you can see the progress so far. FYI I know it's not the cleanest code right now - I'll refractor it later... ? but any help with code optimisation would also be well received! What am I trying to achieve? I'm trying to make the various elements (triangles, circle, squares) on the page float around randomly and then as the user scrolls it settles in a certain configuration. What I've done so far... On page load the shapes scatter randomly (but don't move around) and as the user scrolls it settles into the correct arrangement. I've also got some text that moves in and out of the viewport. Not so important but it gives you some context. What I need help with... Everything is working great but I'm not sure how to get shapes to stop moving after the arrangement is completed. After the final form is completed the shapes still move about randomly. I've tried various techniques(probably incorrectly) such as adding and removing CSS classes onEnter but there were a few issues I had with that. I could be going about this the wrong way so any suggestions would be helpful. Thanks.