QuickTip: Function-based values

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:”+=…

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.

See the Pen BzmGba by GreenSock (@GreenSock) on CodePen.

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.

See the Pen BzmGba by GreenSock (@GreenSock) on CodePen.


Print Share Comment Cite Upload Translate
APA
Blog | Sciencx (2024-03-29T08:53:41+00:00) » QuickTip: Function-based values. Retrieved from https://www.scien.cx/2018/03/21/quicktip-function-based-values/.
MLA
" » QuickTip: Function-based values." Blog | Sciencx - Wednesday March 21, 2018, https://www.scien.cx/2018/03/21/quicktip-function-based-values/
HARVARD
Blog | Sciencx Wednesday March 21, 2018 » QuickTip: Function-based values., viewed 2024-03-29T08:53:41+00:00,<https://www.scien.cx/2018/03/21/quicktip-function-based-values/>
VANCOUVER
Blog | Sciencx - » QuickTip: Function-based values. [Internet]. [Accessed 2024-03-29T08:53:41+00:00]. Available from: https://www.scien.cx/2018/03/21/quicktip-function-based-values/
CHICAGO
" » QuickTip: Function-based values." Blog | Sciencx - Accessed 2024-03-29T08:53:41+00:00. https://www.scien.cx/2018/03/21/quicktip-function-based-values/
IEEE
" » QuickTip: Function-based values." Blog | Sciencx [Online]. Available: https://www.scien.cx/2018/03/21/quicktip-function-based-values/. [Accessed: 2024-03-29T08:53:41+00:00]
rf:citation
» QuickTip: Function-based values | Blog | Sciencx | https://www.scien.cx/2018/03/21/quicktip-function-based-values/ | 2024-03-29T08:53:41+00:00
https://github.com/addpipe/simple-recorderjs-demo