This content originally appeared on Blog and was authored by Blog
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:
-
index (integer) - the target's position in the array of targets. For example, if there are 3
<div>elements with the class ".box", and yougsap.to(".box", ...), the function would get called 3 times (once for each target) and the index would be0first, then1, and finally2. -
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.
This content originally appeared on Blog and was authored by Blog
Blog | Sciencx (2018-03-21T13:11:00+00:00) QuickTip: Function-based values. Retrieved from https://www.scien.cx/2018/03/21/quicktip-function-based-values/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.