GSAP.UTILS HELP toArray + random

[pietM]

Hi all! 

 

I'm trying to run a timeline using gsap's toArray and random utilities. In the attached demo, I have a simple sequence that I would like to randomize and re-randomize on repeat. 

 

2,5,7,8,9....etc. 

repeat 

3,8,7,1,2...etc.

 

I've reviewed the documentation and haven't been able to figure out how to implement gsap's random or shuffle utility to achieve this. 

As always, I appreciate any and all guidance. 

 

See the Pen b6ec32105578a360dc4c47bc3809e2f5 by evryali (@evryali) on CodePen

[ryan_labar]

Here's another approach that I got to randomize, but doesn't re-randomize on repeat for some reason. I'll look more in the morning.

See the Pen oNVZzQd by ryan_labar (@ryan_labar) on CodePen

[mvaneijgen]

repeatRefresh: true,  doesn't refresh staggers.  But I've used @ryan_labar function and in onComplete of the tween just call the same function again, which then views it as a new function and recalculates the function. 

 

See the Pen ZEPeeXQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[pietM]

Great. Thank you @mvaneijgen@ryan_labar!!

Calling the function onComplete makes sense! But, is there a way to achieve the random re-set, etc. without the use of keyframes? Is there a reason NOT to use a timeline (If I wanted to add complexity to the animated sequence)?

Thanks for your feedback and help!! 

[PointC]

Sounds like a good use case for the pluckRandomFrom helper function.

https://gsap.com/docs/v3/HelperFunctions/helpers/pluckRandomFrom

[ryan_labar]

Here's an option using timelines:

See the Pen NWJpXJW?editors=0010 by ryan_labar (@ryan_labar) on CodePen

 

There's some timing issues in my super-quick example, but those should be pretty easy to straighten out.

[pietM]

Thank you @ryan_labar , @mvaneijgen and @PointC!!

 

This probably isn't as elegant as the proposed solutions , but it came down to how to link the array to GSAP's shuffle utility.  Thanks again for the speedy and useful feedback. 

Love this platform!! 

 

Here's my solution: 

 

See the Pen 94e2c7952237f4236535cceabbc1a64a by evryali (@evryali) on CodePen