Cycle through array w/ buttons

[Tompy]

Hi,

 

Been trying to make the text cycle on click with the buttons "back" and "next". At the moment they are just looping.

Any suggestions on how I can achieve this?

 

Thanks!

See the Pen gdbVWe by t0mpy (@t0mpy) on CodePen

[Shaun Gorneau]

Hi @Tompy and welcome to GSAP

 

There are a few things going that may be the issue, depending on my understanding of the issue your having and the desired outcome you want. If you want the labels "NUMBER1", "NUMBER2", etc. to only appear on a click of "back", or "next" ... here are some fixes.

 

1. Your javascript uses 

var back = document.getElementById("back");
var forward = document.getElementById("forward");

 

But your HTML had no id's on those elements.

 

2. Your looping because your Timeline's are set to call() the next/previous timeline setup which in turn are free to play through and make the next call()

 

3. Your onclick handlers had an issue (noted in the JS comments)

 

4. In previous() your --index logic was looking to see if index was less than the length of the array ( should be greater than -1 )

 

And I just made a quick assumption that you would like "NUMBER1" to run through on page load (I could be wrong there)

 

See the Pen rZVNxK by sgorneau (@sgorneau) on CodePen

 

 

[Tompy]

Hi Shaun,

 

Thanks so much for your fix! Really appreciate it your time.

 

All the best

[Tompy]

One more thing I would love to know,  what would be the best way to loop this so that when you reach "Number 4" it reverts back to "Number 1" without having to hit the back button. 

 

Many thanks

[Shaun Gorneau]

15 minutes ago, Tompy said:

One more thing I would love to know,  what would be the best way to loop this so that when you reach "Number 4" it reverts back to "Number 1" without having to hit the back button. 

 

Many thanks

 

Sure, no problem. Check out this edit and look at the next() and previous() functions ... you'll see how we're looping around there.

 

See the Pen EejVoM by sgorneau (@sgorneau) on CodePen

 

Happy tweening

[Tompy]

Thank you so much   really appreciate it.

[Shaun Gorneau]

19 hours ago, Tompy said:

Thank you so much   really appreciate it.

 

Happy to help!