How to cycle through a set of values

[alexb148]

I'm not sure of the technical description for what I want to do, but I think I can explain it.

 

Say I'm tweening a property, "x".

 

X must always be a number from 1 to 10.

 

I can tween this easily enough like so:

 

gsap.to(object, 5, {
  x: newValue,
  roundProps: 'x',
});

 

If I want to tween x from "4" to "7" then it loops through fine, essentially going 4, 5, 6, 7.

 

However, if I want to tween from "7" to "4" I don't want it to go 7, 6, 5, 4 - I actually want to go 7, 8, 9, 10, 1, 2, 3, 4.

 

i.e. always counting upwards to a maximum value before starting from the beginning again.

 

Is there a built in way to achieve this in gsap? Thanks!

 

 

[OSUblake]

You can use the wrap util for this.

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

3 hours ago, alexb148 said:

I want to tween from "7" to "4"

 

 

let obj = { x: 7 };
let wrap = gsap.utils.wrap(1, 10);

gsap.to(obj, {
  x: 13,
  modifiers: {
    x: value => Math.round(wrap(value))
  }
});

 

[alexb148]

@OSUblake thanks very much, that's a handy utility - solved the problem perfectly!