Random position loop

[Warren_A 2 Likes (Newbie)]

Hi guys. I'm really new to GSAP so just playing around trying to see how it all works.

 

I've created two dots which I would like to have randomly move around the canvas (within a set pixel range) and then loop forever.

 

I've been able to figure out the pen attached, but know that it is so far from an efficient way of doing this. Any help?

 

Even being able to set 5-6 x/y points which the objects move to in a loop would be perfect.

 

See the Pen dyPZwqR by warrenasp (@warrenasp) on CodePen

[mikel 4,782 Likes (Superhero)]

Hey @Warren_A,

 

Welcome to the GreenSock Forum.

 

GSAP 3.0 is so convenient:

 

var tl = gsap.timeline ()
.to('.ball',{
  x: "random(-20, 20, 5)", //chooses a random number between -20 and 20 for each target, rounding to the closest 5!
  y: "random(-20, 10, 3)",
  duration:1,
  ease:"none",
  repeat:-1,
  repeatRefresh:true // gets a new random x and y value on each repeat
})

 

See the Pen vYEWqJY by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[GreenSock 18,876 Likes (Superhero)]

Yep, @mikel is exactly right. You could do this: 

gsap.to("#ball1, #ball2", {
  x: "random(-15, 35)",
  y: "random(-15, 35)",
  ease: "power1.inOut",
  duration: 1, 
  repeat: -1,
  repeatRefresh: true
});

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

 

There are a bunch of other ways to accomplish it too, but this is probably the simplest. ?

 

Happy tweening!

[Warren_A 2 Likes (Newbie)]

@mikel @GreenSock

 

That worked perfectly! Thanks so much guys