Random floating effect that moves to a static position on scroll.

[matt hew]

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.

 

See the Pen wvPyozb by -matt-hew- (@-matt-hew-) on CodePen

[elegantseagulls]

What's tricky is that if your shapes are moving randomly, how do you get them to come together while maintaining that randomness?

 

My thought would be to have two layers for each shape: a parent layer that's animated to create the final shape, and a child that provides the randomness within certain bounds. You'd then need to tighten the bounds and lessen the randomness onUpdate, in proportion to the progress, of the scrub animation, then when that's complete animate all the random-layers together, or animate a parent layer to all the shapes randomly so that they all move together.

[matt hew]

@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.

 

See the Pen JjOpMEY by -matt-hew- (@-matt-hew-) on CodePen

[GreenSock]

Yep, I think @elegantseagulls has a good idea there. A slight twist on that idea is to use modifiers to link the wandering distance to a value that you just scrub-tween with your ScrollTrigger so that it gets tighter and tighter as you scroll down. 

 

Sorta like this:

See the Pen mdqXLZL??editors=0010 by GreenSock (@GreenSock) on CodePen

 

By the way, I'd strongly recommend against animating to a generic "transform" property value. You'll get better performance and clearer code if you use the individual transform-related properties like rotation, x, y, scaleX, scaleY, etc. 

[mikel]

Hey Jack,

 

I had also tried - but I failed with the ScrollTrigger. So here's a little joke ...

 

See the Pen wvPmJOx??editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[matt hew]

@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"?

[OSUblake]

6 hours ago, matt hew said:

Are you saying not to use "left, right, top, bottom"?

 

He said what to use directly after that 😉

 

Quote

rotation, x, y, scaleX, scaleY, etc. 

 

The entire list can be found in the 2D/3D Transforms section in the CSSPlugin docs.

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

[matt hew]

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