GSAP Split Text essentially allows us to split any amount of text by lines, words, or even characters, and then control those individual split elements and apply all the GSAP transformations we know from GSAP Scrolltrigger, and even change CSS parameters for every element we’ve split the text into.
A new Event Type has been added to GSAP: the Split Text Event Type. This will unlock a further menu option – the Split Type selection option – allowing us to select which element to split our text by. This can be Letters, Words, or Lines.
We can select multiple options as to split the text in more ways than one, according to the selection. The text has as such been split into its constituent element according to our selection, and the animation that we will then define in the Transformation Options will apply to either each letter, word, or line, or mix of all three, as seen in the example at the bottom of the page.
The target is the element that will be animated. We will need to paste its selector in the Target field.
The important thing to note when thinking about the Target field in our GSAP tween (event) is that in order to keep the styling consistent once the animation starts, we need to make sure we’re specifying the HTML tag we’re targeting as well. For example, we may want to give our text a h2 tag, and then write h2 to the side of the CSS ID, CSS Class or other selector we’re using in the Target field (e.g. #text h2) This will make sure that GSAP Split Text will know how to split the text by selecting the correct div the text is wrapped in.
It is also important to note however, that if we want to target the same text with two tweens (for example if we want to apply one transformation to the Lines, and a different one to the Words), then we will not have to target the HTML tag in the second tween that targets the same widget. (e.g. #text h2 as the first tween’s target, #text in the second)
After having set up the Canvas Settings like we would any other GSAP Event Type, as outlined in the GSAP Scrolltrigger Module Page and the GSAP Scrolltrigger Overview Video, we can move on to the Transformation Settings.
This is where we can define the transformation values our text will either transform into or from, depending on the tween (event) function. This is also where the Split Text Event Type differs the most from other Gloo GSAP Event Types, as we not only find the classic transformation options such as translation, opacity, scale and rotation, but we will also find color and background color options, and even a Custom Arguments field. Moreover, by using the toggles, we will have access to CSS Filter animation values, Text values like letter spacing, word spacing and line height, and Box and Text shadow values for our animation.
This is a field where we will be able to manipulate any CSS property of the text via the use of delimeter-based arguments (e.g. font-Size:12px,color:red,font-weight:bold)
Considering that we may be targeting down to the individual characters in a line of text, we may want to use staggering in order to animate each element we split the type down into. So for example, if we have selected the Letters Split Type, but haven’t defined a Stagger value in the Animation Settings, the transformations defined in the Transformation Settings will happen for each letter in the text at the same rate, according to the timeline defined by the canvas options and the scrolling space available. The same goes for Lines and Words Split Text.
By adding a Stagger value, expressed in seconds, in the Animation Settings, we can have each element animate after the other, each counting down the specified value after the start of the previous element’s animation before starting its own. More details on Staggering can be found in the Manual Timeline and Staggering Tutorial.
Furthermore, we may want to pin our text until the animation has completed its course for each of the elements that the same text has been split into.
To do that, we can paste the Selector for the widget that contains our text in the Pin Element field, found in Pin Settings.
It’s important to note that pinning the same element twice in two different GSAP tweens will result in unexpected and undesirable behavior. Only pin each element once.
More information on pinning in GSAP can be found in the GSAP Scrolltrigger Pin Functions Tutorial.
Looking for a lifetime deal?
