Random Movement of Elements using GSAP

[jla]

Hi, 

 

Is there any way to randomly move elements with greensock. 

I would like to create a similar effect to 

http://jsfiddle.net/Xw29r/15/

 

I'm currently combining this jQuery code with a tweenmax to rotate and randomly move elements on the screen.

But in Chrome it's quite jittery. In firefox it seems smooth.

 

What I'm basically looking for is gsap code to create a loop that randomly moves (and rotates if possible) elements within a viewport. So it would move the 'x' and 'y' position based on the current position, so it doesn't restart from it's origina; position.

 

Thanks!

 

 

 

[OSUblake]

Use x and y instead of top and left. You can get transform values like this...

// No jQuery
var x = element._gsTransform.x;

// jQuery
var x = $(".foo")[0]._gsTransform.x;

But random movement is not linear, and should look more like this...

See the Pen RrBXxB?editors=0010 by osublake (@osublake) on CodePen

 

You should look into using the BezierPlugin. I also posted some links to help out with physics...http://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/?p=59280

 

You might be able to get some ideas from chapter 6 in The Nature of Code book, which deals with vehicles.

http://natureofcode.com/book/chapter-6-autonomous-agents/

[jla]

Hi OSUblake,

I will use your info.

Thanks for the useful reply!