Show / hide random slides

[mdelp]

Hi all,

 

I'm looking to build a fairly simple slider but lack the knowledge to do so, hope someone can point me in the right direction.

I have a slider that contains 3 images, and when the page loads I want one of those images (random) to show. Then I want to bind an event (will be a Barba page transition, but could be a button too), that fades out the current image that is showing and fades in another random image.

 

Everytime the event is triggered, the current slide has to fade out and a random other one has to fade in. Is this possible with gsap?

See the Pen JjKwOyZ by mathieudelporte (@mathieudelporte) on CodePen

[ZachSaucier]

13 minutes ago, mdelp said:

Is this possible with gsap?

Definitely! GSAP can handle the animation part easily. However, all of the other logic (choosing a random image that's different than the last, the button listener, etc.) you'll have to write yourself. 

[mdelp]

20 hours ago, ZachSaucier said:

Definitely! GSAP can handle the animation part easily. However, all of the other logic (choosing a random image that's different than the last, the button listener, etc.) you'll have to write yourself. 

 

Thanks for the feedback Zach! I was able to get it working perfectly with GSAP and Barba hooks but ended up using a different approach.