How to show hide images randomly

[ManishDev18]

I have taken GSAP website examples. In this part, they are showing companies that use gsap. They are randomly showing different companies. How to achieve this?

[mvaneijgen]

Hi @ManishDev18 welcome to the forum!

 

What have you tried your self already? What I would do is just display all the images how you would like them and stack them right on top of each other. Then with GSAP, just show and hide them. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo:

 

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

 

Just try something and when you're stuck post back here with your demo. 

 

If you need help getting started, check out the Greensock Youtube Channel https://www.youtube.com/c/GreenSockLearning/videos

 

Hope it helps and happy tweening! 

[ManishDev18]

Hey, thanks for the reply. I tried solving this problem. 

There are some problems I'm facing.

1. As you said stack all the elements on to top of each other and show hide elements. What I did is to create a function named shuffleCircle. Created a timeline for showing or hiding the elements. I have to repeat the animation infinitely so I have called the same function once the animation is completed with onComplete property.
 

But, I need gap between individual function calls. How to create a gap between the animation once a timeline is succefully completed.

Codepen URL: 

See the Pen vYvzXxp?editors=0010 by manish1269 (@manish1269) on CodePen

[mvaneijgen]

You are looking to delay the call of the onComplete for X amount of seconds? Check out gsap.delayedCall(); https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

I would also look in to shuffling the array of elements and then using that array as the order, in your current setup the same element can be called right after each other I think? If you just get the array of every item and shuffle them [3, 6, 1, 4, 2] that will be not an issue. 

 

Hope it helps and happy tweening! 

 

See the Pen qBLJNXz?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[ManishDev18]

Thanks.

[Shrug ¯\_(ツ)_/¯]

Welcome to the forum @ManishDev18,

 

In addition to @mvaneijgen's always great advice and guidance, I thought it might be good to include this post from an older thread. It’s directly related to your initial screenshot although older and would need to be migrated to GSAP 3 with all its newer available features & utility methods, etc.

 

Maybe it will also be useful to someone.