cycle()

Returns : *

Returns the next item in an array after the given index. Or returns a function that returns that object if no index is given.

Maps the elements in one array to those in another, cycling through them when the quantities are mis-matched. In the context of tweening this has the effect of cycling through the values.

For example, if you have 10 elements with the "box" class applied, and you’ve got a ["red", "green", "yellow"] array of colors that you’d like to have those elements animate to so that the first box animates to "red", then next to "green", then next to "yellow" and then wrap around agin so that the 4th would go to "red", 5th to "green", etc., cycle() is perfect for that. If we don’t provide an index value (2nd parameter), we’ll get a function instead that’s ready to do cycling accordingly.

//returns the corresponding value in the array (wrapping back to the beginning when necessary)
let num = gsap.utils.cycle([0, 10, 20], 4); //10 (index 4 maps to index 1 in a 3-element array)
//if we don't provide an index, we get a function that's ready to do cycling accordingly
let cycler = gsap.utils.cycle([0, 10, 20]);
//now we just feed an index number into the function we got back from the line above and we'll get the corresponding value from the cycled array
let num = cycler(4) // 10