Skip to content

Range selector

Within animators, range selectors allow you to select and animate a range of text to apply styling to. By animating range selectors, it is possible to make a variety of effects in which the styling gradually appears on the text, such as letter by letter or word by word.

Range selector parameters

Range selector parameters

Range selectors select elements from the Start position up to (but not including) the End position. An offset value can be used to shift this range without changing its size. Both positions and the offset are animatable. The Units parameter controls whether the range is specified in number of elements (Index), or in percentages (Percentage).

NOTE: A default range selector that selects the entirety of the text is automatically added when creating an animator.

Selection granularity

The Based On parameter specifies what kind of text elements the Start, End and Offset parameters refer to:

Based On Description
Characters Character-based positions
Characters excluding spaces Character-based positions that skip whitespace in the input text
Words Word positions

Example:

With a range selector with Units = Index, Start = 4.0 and End = 6.0.

Characters: The substring "m \<space>" is selected. Based on characters
Characters excluding spaces: The substring "m i" is selected, as the space between the letters are not considered when counting characters. Based on characters excluding spaces
Words: The 4th and 5th words are selected. Based on words

Partial selections

Indices and percentages can be fractional. As such, it is possible for the start or end position to not fall exactly between two text elements, leaving a partially selected element. For those elements, the applied styles are scaled (where applicable) by a fractional weight that depends on the proportion of the range covering the element.

Range selector parameters

Fractional scaling on range selectors: the range bounds (3.5 to 7.5) fall inside characters "o" and "p", leaving them partially selected. The applied style (in this case, a 200px vertical offset) is scaled by the fraction of the character in the selection.

The behavior of the fractional weight can further be controlled by the Easing parameter. The Step mode disables fractional scaling: styles are either fully applied or not at all, depending on whether the element is at least half into the range.

Some styles are not represented by numeric values and cannot be scaled. These are:

  • Font family
  • Italic
  • Kerning

For those, the range selector behaves as if the Step mode was selected.