Jump to content
GreenSock

Spiderian

Rotator Controls

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I made this sweet rotator that I can put as many images into as I could ever want, but I am trying to add forward and back buttons. It's not going well. I tried this code for the forward button but I can't seem to figure out how to add a 30 second pause before restarting the animation.

 

rightBtn.click(function(e)
  {
    console.log( slideAnimating );
    var btnIndex = rightBtn.index(this);
    if(!slideAnimating && btnIndex !== slideNumber)
    {
      timerFunction.pause();
      nextSlide = btnIndex;  
      changeSlide();
    }
});

 

Then the left button I want to play the animation in reverse to get the last image that was designated currentSlide and nextSlide to move backwards, wait 30 seconds then go back to the normal flow.

 

Any help would be greatly appreciated.

See the Pen RrOjVM by Spiderian (@Spiderian) on CodePen

Link to comment
Share on other sites

Sorry for the delay.

 

I'm having trouble understanding what is happening here.

I don't see any buttons or code related to the buttons.

I also see that you are adding some tweens to a timeline (tl) on every slide change and others you are moving with TweenMax tweens. I think that might cause some problems if you want to start going in reverse.

 

I'm not really sure how to fix this without re-writing a considerable portion of it (or spending time studying exactly what each line is doing), and unfortunately that isn't something I can do for you. We really have to focus our support on answering questions related to the GSAP API.

 

Some general tips:

 

you might want to consider having a single changeSlide() function that takes a parameter which states which slide to change to like

 

changeSlide(3)

 

This way your back and next buttons can do things like changeSlide(currentSlide + 1) or changeSlide(currentSlide-1)

 

and you won't need a separate nextSlide() and prevSlide() functions.

 

To change slides automatically I would suggest using delayedCall() as you are doing but add logic so that when you reach the last slide you just use a larger delay.

 

I really think you have a large part of this done, you just need to wiggle out of some logic holes.

  • Like 3
Link to comment
Share on other sites

It's okay. I scrapped it and used the extraSlider plugin. The buttons were just grey bars on either side. I didn't manually label each of the slides because depending on the project there would be a different number of pictures so I wanted them numbered dynamically. I could have probably written a code that would detect how many pictures and change "n" for slide(n), but it doesn't matter because the plugin is handling it really well.

 

Thank you anyhow.

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