distribute()

Returns : Function

Returns a function to distribute an array of values based on the inputs that you give it.

Distributes an amount across the elements in an array according to various configuration options. Internally, it’s what advanced staggers use, but you can apply it for any value. It essentially assigns values based on the element’s position in the array (or in a grid):

//get a function that, when fed an index value, will return a value according to the configuration options
var distributor = gsap.utils.distribute({   
    //the base value to start from (default:0)
    base: 50,
    //total amount to distribute across the targets (this amount gets added to the "base" when returned)
    amount: 100,
    //position in the targets array to begin from (can be an index number, a keyword like "start", "center",
    //or "end", or an array of ratios along the x-axis and y-axis like [0.25, 0.75] (default: 0)
    from: "center",
    //bases distribution on the element's position in a grid [columns, rows] instead of a flat array.  
    //You can also define the columns and rows in array format like [10, 5]
    grid: "auto",
    //for grid-based distributing, you can limit measurements to one axis ("x" or "y")
    axis: "y",      
    //distributes based on an ease curve!
    ease: "Power1.easeInOut"
 });
//get an array of all the elements with the class ".box" applied
var targets = gsap.utils.toArray(".box");
//now for any target element, we can just feed in its index from the targets array (along with the target
//and array) and it'll do all the calculations and return the appropriate amount:
var distributedValue = distributor(2, targets[2], targets);

This can be used directly in a tween:

//animate the scale of all ".class" elements so that the ones in the middle are 0.5 and the ones on
//the outer edges are 3
gsap.to(".class", {
  scale: gsap.utils.distribute({
    base: 0.5,
    amount: 2.5,
    from: "center"
  })
});