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

# Animating Arrays - Giving each item a different random value

Go to solution Solved by PointC,

## Recommended Posts

Pretty simple question, just one I can't figure out an answer to! See codepen above. Rather than having all 10 boxes moving left and right according to the same random number, I want each of them to have a different random left and right value. How can I accomplish this?

See the Pen vYJamoV by kslaton (@kslaton) on CodePen

##### Share on other sites

I increased the duration and max x value a bit, but this should point you in the right direction.

See the Pen fef3a5cf1dd3188f6ea93e052eb015ac by PointC (@PointC) on CodePen

Happy tweening.

• 2
##### Share on other sites

Perfect! Thank you so much.

• 1
##### Share on other sites

Happy to help. Thanks for being a Club member. We really appreciate the support. 🙌

• 1
##### Share on other sites

No problem at all, we love us some GSAP here at our agency.

I do actually have one more question. Say I wanted the random bounds to increase on each repeat. So first go round they go random(0,500), then next round random(0, 750), etc etc. Is there a way i can accomplish that?

##### Share on other sites

• Solution

I think I'd probably put it into a function that called itself after each iteration. Maybe something like this.

See the Pen 8a208b01227fead3d30916074ca3a1a5 by PointC (@PointC) on CodePen

Happy tweening.

• 1
##### Share on other sites

Nice job, @PointC. That's a great solution. 🎉

Very minor thing:

`newMax = newMax < 600 ? (newMax += 100) : (newMax = 100);`

Should probably be:

`newMax = newMax < 600 ? newMax + 100 : 100;`

I also thought of a different (not necessarily better) approach:

See the Pen c784d28b84400ce17949fcd17d8a4bc6 by GreenSock (@GreenSock) on CodePen

But honestly, my first instinct was to go with precisely the technique @PointC suggested.

• 1
##### Share on other sites

3 minutes ago, GreenSock said:

Very minor thing:

Ha! You're right. No idea why I wrote it like that. 🤷‍♂️

• 1
##### Share on other sites

Perfect. Thank y'all.