QuickTip: Function-based values

Sign in to follow this   Followers 0

Have you ever wished you could run a little custom-logic to determine the values that would be used for each target in a tween? Welcome, function-based values! Instead of defining a number (x:100) or string (width:"100vw") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below.

Parameters: index, target

The function is passed two parameters:

1. index (integer) - the target's position in the array of targets. For example, if there are 3 <div> elements with the class ".box", and you gsap.to(".box", ...), the function would get called 3 times (once for each target) and the index would be 0 first, then 1, and finally 2.
2. target (object) - the target itself (the <div> element in this case)

Using the index parameter makes it easy to increment the value accordingly. There are lots of ways to get creative. The demo below uses the index parameter to tween each element's x value in increments of 100.