Jump to content
Search Community

Auto Play GSAP Slider

Shaban Iddrisu™ test
Moderator Tag

Recommended Posts

Hello Everyone.

I hope you are doing well today.

I have a little issue I am finding difficulty in implementing and I would be very grateful to anyone who may be able to help me.

I have recently (a few months ago) started using GSAP and I find it a very robust tool to create stunning animations on the web.
For that matter, I purchased a great course online, one that is geared towards "Creating Custom Sliders with GSAP".

I have been able to implement the slider, however I am facing a little complication on how to make the slider AUTO PLAY after a set period of time. I figured I need to use the Window setTimeOut() Method but I am not able to identify the right spot to place this function.

 

I posted about this in the course forum, specifically to the Tutor but for some reason I do not know, I didn't receive adequate attention nor help in solving this issue.

Kindly take a look at my code and help me sort this out.

 

Thank you!
 

See the Pen OJRMQBx by shaban-iddrisu (@shaban-iddrisu) on CodePen

Link to comment
Share on other sites

Hey Shaban and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

As always, you should think about how to do this logically (not in code) first. In this situation you will need a way of telling the slider to go to the next slide and also telling the slider to do that every so often.

 

Now think in code:

How can you tell the slider to go to the next slide?

How can you tell the slider to do something every so often?

 

Once you have the answer to both of those questions then you'll be able to do what you need to do. The only remaining thing is to optionally kill off the looping if the user manually navigates.

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

@Syed Azam I created an autoplay() function which runs the nextSlide() function. The autoplay() is fired when the slider element is in the viewport. Previously, I was using ScrollTrigger to check when the slider element is in view, however, now I use Intersection Observer to do the checking and run the autoplay(). I also stop the autoplay() with the clearInterval() method when the slider element is not in the viewport as shown in the code below.

 

let autoplay = null;

const autoPlaySlide = () => {
  autoPlay = setInterval(() => {
    nextSlide();
  }, 3000);
};

/*------------------------------
Stop Auto Play
------------------------------*/

const stopAutoPlaySlide = () => {
  clearInterval(autoPlay);
};

/*------------------------------
Observer
------------------------------*/

const runObserver = (observe) => {
  const setActiveElement = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        autoPlaySlide();
      } else {
        stopAutoPlaySlide();
      }
    });
  };

  const options = {
    rootMargin: '0px',
    threshold: 0.3,
  };

  const observer = new IntersectionObserver(setActiveElement, options);
  observer.observe(observe);
};

runObserver(sliderElement);

 

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.
×
×
  • Create New...