When Animation Completes, Pick Another Random Element to Animate

[Pinz0ne]

Hi Everyone! I've been reading these forums for years and always found an answer that fit my needs, but this time I'm either not finding what I need or not sure how to implement what I am finding. 

 

I'm creating an interactive touch-screen display using React. The "homepage" consists of 11 bubbles that animate and display content when tapped. That part I've gotten working well thanks to all of you.

 

The part I'm stuck on, is the client would like a random bubble to animate in some way when the homepage is displayed. I got it setup to choose a random bubble and animate it, but I can't figure out how to rerun the animation on another random element when it completes. 

 

Thanks for all your help!
 

 

See the Pen dyyQRGd?editors=0010 by the1andonlypz (@the1andonlypz) on CodePen

[ZachSaucier]

Hey PinzOne and welcome to the forums! We're so glad that the forums have been able to help you without the need of posting  

 

I think it'd be helpful to see a basic demo of your setup. 

But using onComplete to create a new random animation is likely what you need to do. It's just hard to give more info past that without a demo  

[Pinz0ne]

Thanks @ZachSaucier -- I've thrown together a CodePen. You'll see the first "random" bubble animates on load, but then nothing happens after.

[ZachSaucier]

Can you just put the function call in the fromTo's onComplete?

 

See the Pen rNNQGva?editors=0010 by GreenSock (@GreenSock) on CodePen

[Pinz0ne]

You know I tried this before and was getting an infinite loop, but now that I think back, perhaps I was immediately invoking it and that's why. Thanks Zach looks like I just needed another set of eyes.