Jump to content


random selection of element at start of timeline? #react (refs)

Recommended Posts

Dear GSAP Magicians,


I have an array of 5 fruits and 5 veggies (concat-ed) into one array of 10 (<li>) elements.

They move from left to right in a very simple tl.to() timeline.


(Using React, I'm dutifully targeting with refs.)


What I wish to do is randomize 3 things:

1) the element moved


2) their velocity (duration)


(and perhaps)

3) the "-=n" delay (so that more than a single element would perhaps be in motion at the same time.


I have a fancy-schmancy method on the prototype that would (seem to) give me the id of each element randomly.


    Array.prototype.randFoodId = function() {
      const rIdx = Math.floor(Math.random() * this.length);
      const val = this[rIdx].id;
      return val;



Problem #1: I smell perf?™.

This approach seems over-engineered... requiring iteration over the entire array at each sequential iteration using .map().


Problem #2: The flow is unnatural.

The randomized `-=${randInt(12, 30)}`   –for example, seems to cause unexpected behavior (one or more elements "appear" and/or slow down mid-stream). 


Would anyone kindly advise me as to how to proceed?


(I may just give up and run two separate arrays of 5. So that their elements are enabled to float randomly past each other. Then, call it a day...)


But, I'm looking for a creative solution with a minimum of code that allows for a bit of dynamism.


Ultimately, I'd like to simulate a scenario that resembles observing a far-off highway...where some cars that go by get overtaken while still in view.


Best & thanks again,




See the Pen GYeBbb?editors=0011 by beauhaus (@beauhaus) on CodePen

Link to comment
Share on other sites

Hi Beau,


First thing I can say is that I don't like to add stuff to elements prototypes unless is necessary, but that is just me and my two cents about it. In your case I don't think is necessary, again just my humble opinion about it.


Regarding your app I'd like to know if you want to animate all your elements or just some. If you want to animate all your elements, then the code you have is not working because you're not shuffling your array, you're simply getting a random index on each iteration, but at some point you could get the same index more than once. Normally when I have to do something like that I use this code:


// this is the array
const a = [101, 102, 103, 104, 105, 106, 107, 108, 109, 110];

const used = [];

const getOne = arr => {
	let selected = Math.floor( Math.random() * arr.length );
    // if the selected index is in the used array
    // try a new one until we get a non-used
	while( used.indexOf(selected) > -1 ) {
		selected = Math.floor( Math.random() * arr.length );
	// add the new index to the used array
	return selected;

a.forEach( () => {
	console.log( a[getOne(a)] );


That's the reason for this:



The randomized `-=${randInt(12, 30)}`   –for example, seems to cause unexpected behavior (one or more elements "appear" and/or slow down mid-stream)


Right now since some of the elements are getting selected twice or more, there are two or more tweens in the timeline that affect the same element, so GSAP is overwriting the first tween and then executing the second one, which creates the sensation of the element slowing down, when in fact the element just started a new tween, as long as the previous, but in a shorter distance. Creating an iteration that takes every element in the array only once would remove that issue.


The rest of the code to create the random numbers seems ok with me.


Finally in terms of React, avoid using string refs since they are considered legacy and will be removed from a future version.




Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Really, really helpful... as was your article on gsap & react:  https://greensock.com/react


thanks so much.


I'll try to put it all together using ref callbacks & see if I don't break the internet with it.



  • Like 1
Link to comment
Share on other sites


Thanks so much for this reply. I'm needing of a "push over the edge".

I've taken your point about the modifying of the prototype.

I've taken your point about the "string refs"--I've opted to use the callbacks (after a bit of a rabbit hole adventure).


I simply can't seem to implement this code into a full working example.


I wonder if you'd kindly help me out. Perhaps it will help others in future.


Thx again for all of your hard work.



See the Pen EdJQZz?editors=0011 by beauhaus (@beauhaus) on CodePen


Link to comment
Share on other sites

An easy way to keep things random is to create a new animation when the current one finishes.


See the Pen aReLeM by osublake (@osublake) on CodePen





  • Like 6
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

Well, that really looks nice!!!


Great job Beau!!!

  • Like 3
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.