Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock Docs

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.

  1. //returns the corresponding value in the array (wrapping back to the beginning when necessary)
  2. let num = gsap.utils.cycle([0, 10, 20], 4); //10 (index 4 maps to index 1 in a 3-element array)
  3. //if we don't provide an index, we get a function that's ready to do cycling accordingly
  4. let cycler = gsap.utils.cycle([0, 10, 20]);
  5. //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
  6. let num = cycler(4) // 10
Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×