Tweening Action
The Tweening Action sets the value of a CSS property to an interpolated value based on a JavaScript variable and specified value ranges. It is useful for such things as parallax scrolling and animation.
Options
- Target Element ID: the ID of the element whose CSS properties are to be altered.
- Style Property: the name of the CSS property to alter.
- Variable Name: the name of the JavaScript variable whose value is used for the calculation.
- Prefix: Any portion of the CSS value that comes before the calculated numeric portion. For example, if the desired value is "rotate(180deg)", the prefix would be "rotate(".
- Suffix: Any portion of the CSS value that comes after the calculated numeric portion. For example, if the desired value is "rotate(180deg)", the suffix would be "deg)".
- Rounding: If a non-negative number is entered, the calculated value will be rounded to that many decimal places. For no rounding, enter -1.
- Stops: A JSON-encoded array of arrays of numbers that control the interpolation function (explained below).
- Maximum Times: the maximum number of times that this Action will execute before it ignores all future events. The counter resets when the page is reloaded. If set to a negative value, it will execute an unlimited number of times.
Tweening Stops
The Stops option contains a JSON-encoded array of arrays of numbers. That may sound complicated, but it's fairly straightforward, once you get the hang of it. A simple example would be:
[[0,10],[100,90]]
The meaning of each part of the code will be explained in detail below. Simply put, this setting would mean, "If the JavaScript value is 0, set the CSS value to 10. If the JavaScript value is 100, set the CSS value to 90. In between 0 and 100, calculate a value between 10 and 90."
A slightly more complex example, which will be referred to below, is:
[[0,10,"",2],[70,20,0.5],[100,80]]
- The outermost [square brackets] make the entire value into an array.
- Inside that array are a number of other arrays in square brackets, separated by commas.
- Inside each array are 2, 3 or 4 numbers, separated by commas.
- Spaces are optional.
- Either whole number or decimal values are allowed for all of the numbers.
- Each of the arrays of numbers defines a "stop". A minimum of two stops are required.
- The first number in each stop is like a point on a number line. When the value of the JavaScript variable specified in the Variable Name option equals the first number, the second number is used for the CSS property. Using the example above, if the value of the JavaScript variable were 70, the numeric value of the CSS property would be 20.
- The stops must be arranged in ascending order (the first number of first stop must be the lowest, and so on up.)
- If the value of the JavaScript variable is less than the first number in the first stop, the second number in the first stop is used for the CSS value. Likewise, if the value of the JavaScript variable is greater than the first number in the last stop, the second number in the last stop is used.
- When the value of the JavaScript variable is between the numbers in two stops, the CSS value is calculated using the second numbers in the two stops. Using the example above, if the value of the JavaScript variable were 85, the numeric value for the CSS property would be 50. This is because 85 is half way between 70 and 100, so we set the CSS property to the number half way between 20 and 80.
- If only two numbers are specified in a stop, a simple straight line calculation is used, as in the example in the previous bullet point.
- If a third and/or fourth number is specified, they are used for "easing". The third number controls the easing as the value of the JavaScript variable approaches the first number in the stop from below. The fourth number controls the easing as the JavaScript value becomes greater than the first number.
- For the easing numbers, a value of 1, or an empty string ("" -- which must be specified using double quotes -- be sure not to use "smart quotes") is the same as not specifying a number -- ie. a straight line interpolation.
- A number greater than 1 will ease into the transition more gradually -- the higher the number, the more gradual the initial transition.
- A number between 0 and 1 will ease into the transition more quickly at first -- the lower the number, the more quickly.