Gsap Timeline Slider with Prev + Next

[djcali]

Hello,

 

I am very new to Gsap but pretty familiar with Javascript. I'm usually good with being able to solve my issues by doing research but can't seem to get this

slider to perform the way intended.  I know there are probably multiple issues with my pen but the issue I know of is when the next button is clicked it will

goto the next slide but of course i'm creating another timeline so everything goes nuts with multiple timelines running.  Can any of you experienced animators

help me out?  Very much appreciated!!

See the Pen abOmexV by djcali (@djcali) on CodePen

[ZachSaucier]

Hey djcali and welcome to the GreenSock forums! 

 

As you know, the core issue is that multiple timelines are created which is not the effect that you're wanting. One option would be to kill off the old timeline if it exists, like so:

var tl; // Move to outside of the function
function timeline () {
  if(tl) { // kill it if it exists
    tl.kill();
  }
  tl = gsap.timeline(...) // Do your timeline (you don't need the new keyword)

However, you also need to reset the pieces of the page that were affected or use .fromTo()s. Otherwise if the elements are in a transitional state already then they would use their current value as the one to animate from or to. For example, if your text had faded out to a value of 0.2 when the button was clicked, then it would fade only between 0.2 and 0 which is not what you want.

 

Side notes: 

• It's better to use x and y instead of left or top. Or xPercent and yPercent since you're using percents (left: "-100%" would become xPercent: -100)
• We recommend the shortened form of eases, i.e. "power4" instead of Power4.easeOut etc. because they're more condensed and easier to use in a module environment. See https://greensock.com/docs/v3/Eases for more information.

There are a lot of GSAP sliders out there - I recommend modifying one over creating your own logic. It would likely save you time over building something yourself, though you're welcome to build something yourself if you want  

[djcali]

Wow, thank you for the quick reply and point in the right direction.  I'm working on your suggestions. So far so good, next button is working perfect.  Having some issues with the prev button now. Trying to figure it out, probably have to change the the slide left animation or something of that nature to get it

working. 

 

Thanks Again Zach!

[djcali]

Well Zach I took your advice and used some logic from a slider that was found on the forum and was able to adapt it and add the features I wanted.

 

Thanks again for all your help!