Fluid and continuous background animation using random directions of movement via a single PNG shape??

[Wolf_22]

I have 5 DIVs, all with the same CSS background image (PNG file) and what I'm trying to do is as follows:

 

1.) Append each "image DIV" to the BODY element at random X/Y coordinates via jQuery(window).ready().
 

2.) Loop through each shape to animate them using random trajectories with random shape rotations.

 

3.) Ensure the animation is continuous and fluid even when the window is resized.

 

 

Can this be done? I've seen a few examples that purport to display randomized animations but they usually have a "jerk" at the end of the animation whereby it then picks up where it left off... I'd like to avoid that and make it all animate continuously without any stops.

 

Everything I've done so far using TimeLineMax with tl.set() and tl.to() have come close but fail to look random with both starting points and animation trajectories but also fail to look fluid... Ugh. I wish I knew this stuff better.

 

Can someone give me some guidance with this? Simply put, I'm just trying to make a fluid motion background using these shapes but when the browser resizes, I want the animation to persist where it was before the window resizes and I want the animation to never stop.

 

 

[ZachSaucier]

Hey Wolf and welcome to the GreenSock forums.

 

From your description, I'd approach the situation using GSAP's Physics 2D Plugin paired with relative units (like % or vw). 

 

Beyond that, it'd be helpful to see your approach and what you're getting stuck with. A CodePen demo would be really helpful. See the below thread on more info on making one:

 

[Wolf_22]

Hi, Zach.

 

Thanks for the CodePen link. I'll try to get an account to that created today but here's a jsfiddle: https://jsfiddle.net/xqac2m58/

 

Maybe that helps illustrate what I'm trying to do a little? Simply put, I'm hoping to create a background aesthetic consisting of shapes which move in random directions upon page load and resize but have the shapes come to a slow stop at some interval after the page is done loading or done resizing. I've come close to having this with the TimeLineMax object but I'm stuck on trying to understand what I've done wrong with making the shapes exhibit fluid motion, meaning, they go for a second or two and then stop whereby that sequence of animation keeps repeating over and over.

 

 

[ZachSaucier]

Hey Wolf,

 

A few suggestions:

• Instead of completely removing the elements from the DOM and adding them back, I would instead use the same elements but refresh their values. 
• Avoid using top and left - it's better to use y and x whenever possible for better performance. 
• Whenever you find yourself repeating yourself, that's usually a good time to use a named function and call that function. It's called keeping your code DRY (Don't Repeat Yourself).
• You don't really need a timeline to do what you're doing here. Timelines are good for sequencing and I don't think you have any sequenced animations? It's not bad to use a timeline for something like this, just unnecessary. 

My approach would look something like this: https://jsfiddle.net/pm3jo8t5/

 

Please let me know if you have any questions! Happy tweening.

[Wolf_22]

Awesome! That did the trick! Thanks, Zach!

 

2 follow-up questions:

 

1.) When you combine multiple animations, that's essentially what you're referring to when you mention sequencing?

 

2.) Why is using the X / Y approach better?

[ZachSaucier]

17 minutes ago, Wolf_22 said:

1.) When you combine multiple animations, that's essentially what you're referring to when you mention sequencing?

Yes. Like when you want an animation to start after a previous animation or something like that.

 

17 minutes ago, Wolf_22 said:

2.) Why is using the X / Y approach better?

x and y make use of the CSS transforms, which don't cause layout thrashing like using top and left do.  

 

One other thing I forgot to mention above: I'm not sure why you were using the $.fn.funcName format to declare functions above - I'm guessing you just saw it somewhere? I recommend using "regular" functions instead  

[Wolf_22]

Quote

One other thing I forgot to mention above: I'm not sure why you were using the $.fn.funcName format to declare functions above - I'm guessing you just saw it somewhere? I recommend using "regular" functions instead  

 

Is there any memory management benefit from using the $.fn.funcName approach? For example, the site I'm working on makes heavy use of jQuery... Not sure if that changes things or not.

[ZachSaucier]

34 minutes ago, Wolf_22 said:

Is there any memory management benefit from using the $.fn.funcName approach?

What do you mean "memory management benefit"? The purpose of jQuery's $.fn.funcName is used to add to the functionality of jQuery - it's shorthand for affecting the prototype. So if you're extending jQuery for good reason then by all means use it. Otherwise it's probably not worth the effort to include.

[Wolf_22]

I was way off base with my idea there... I guess I was thinking about how it might be a better way for the browser (or instance of the script) to better handle any trash if it's constrained to the jQuery object but after looking it up, it looks like JavaScript has its own memory management (like PHP does). No, I'm not thinking about extending anything, so I'll definitely stick to the regular way.

[ZachSaucier]

34 minutes ago, Wolf_22 said:

it looks like JavaScript has its own memory management

It does indeed. JS does a pretty good job of garbage collecting most of the time  

Likely the larger concern (if any) is avoiding polluting spaces unnecessarily (scoping things properly). Say this script were part of a larger script - you may or may not want to contain it within an IIFE.

[Wolf_22]

It is part of a larger script but thankfully, that's where the Drupal Behaviors handles that for me.