Jump to content
Search Community

Random position loop

Warren_A test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Hey @Warren_A,


Welcome to the GreenSock Forum.


GSAP 3.0 is so convenient:


var tl = gsap.timeline ()
  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)",
  repeatRefresh:true // gets a new random x and y value on each repeat


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


Happy tweening ...



  • Like 3
Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...