Jump to content
GreenSock

mdelp

Show / hide random slides

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

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.
×