Random animations

[Alyz]

Hi, I'm putting together an animation which moves a number of element around the screen at in a seemingly random pattern, I am able to achieve one random movement but when I apply a repeat:-1 the positions all reset. I'm thinking I need some sort of looping function to achieve this but my javascript is not as strong as it could be and and i'm struggling to work it out?

 

I'm also aware that the way i'm animating the items might mean that they eventually end up off screen, is there anything more intelligent I can do to stop this from happening?

 

Any help gratefully received.   

See the Pen JjdEEGz by AlexFarminer (@AlexFarminer) on CodePen.

[Carl]

Cool demo. The first part of your question can be solved by adding repeatRefresh:true to your timeline like so:

 

var tl = gsap.timeline({
    repeat:-1,
  repeatRefresh:true
});

 

This is explained in more detail in the GSAP 3.1 release notes. Be sure to watch the video!

 

 

[OSUblake]

5 hours ago, Alyz said:

I'm also aware that the way i'm animating the items might mean that they eventually end up off screen, is there anything more intelligent I can do to stop this from happening?

 

If you keep your SVG in the same aspect ratio, like you're already doing, then use values from your viewBox size. Assuming everything starts out centered, you would use half the values of your viewBox (1920 x 1080) .

 

var randomX = gsap.utils.random(-920, 920, true);
var randomY = gsap.utils.random(-540, 540, true);

tl.to(data, {
	duration: randomTime,
	x: randomX,
	y: randomY,

})

 

Of course that can put stuff right up to the edge, so you might want to reduce those values by the width and height of the largest elements.

 

[mikel]

Hey @OSUblake,

 

With the keyword RANDOM, this pen always popped up:

 

See the Pen BRpgpR by osublake (@osublake) on CodePen.

 

So why not 

 

See the Pen YzXNaKo by mikeK (@mikeK) on CodePen.

 

Happy random distance ...

Mikel

[OSUblake]

38 minutes ago, mikel said:

With the keyword RANDOM, this pen always popped up:

 

Ha. Still one of my favorite pens.

[Alyz]

Really great, thanks everyone.