Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Warren_A

Random position loop

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

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×