GSAP Split Text

Unleash text animations in Elementor thanks to GSAP Scrolltriggers' Split Text.

watch the GSAP Split Text tutorial

Play Video

GSAP Scrolltriggers’ Split Text will allow you to create incredible text animations using just your Elementor editor, without any code.

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.

New GSAP Event Type – Split Text.

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.

How to target text using GSAP Split Text.

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)

Transformation Settings.

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)

Staggering options.

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.

Pinning.

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.

Scope : Extension
Dependencies: Elementor

Frequently Asked Questions

GSAP Split Text is a feature that allows you to break text into its individual elements, such as letters, words, or lines, and apply animations and transformations to each of these elements using GSAP Scrolltrigger. You can control the styling and animations of text within your Elementor editor without writing any code.
To target text with GSAP Split Text, specify the HTML tag of the text element you want to manipulate in the “Target” field of your GSAP tween. For example, if you want to target text within an

tag, you would specify “h2” in the target field. This ensures consistent styling when the animation starts. If you want to apply different transformations to different parts of the text, you can use separate tweens without specifying the HTML tag in the second tween.

In the Transformation Settings, you can define various transformation values for your text, including translation, opacity, scale, rotation, color, background color, and even custom CSS properties. You can also apply staggering effects to animate individual text elements one after the other by specifying a stagger value in seconds. Additionally, you can pin text elements until animations are complete by using the Pin Element field in the Pin Settings.

THIS FEATURE IS PART OF :

TEXT
ANIMATION

you CAN MAKE using elementor and gloo

WITHOUT WRITING
CODE.

you can split text by lines you can split text by words you can split text by letters and... you can split text by any combination of the 3 options. you can change any css parameter including positions color size transformations and anything else that comes to mind

its time to unleash your creativity using your favorite tool, Elementor to create mesmerizing websites effortlessly with the help of...

Gloo logo - white

More Modules

Salesforce CRM Form Action
Image Cropping UI
Country Dial Code Field New
Datepicker Field
OpenAI Form Action New
Dokan Dynamic Tags
GSAP Slider Tween New
GSAP ScrollTrigger
Image Upload UI New
Ajax Connector
Typography +
Dynamify Repeaters New
Dynamic Tag Everywhere
Frontend User Registration New
BuddyBoss Dynamic Tag Kit
Woo Product Discount Widget
Native Dynamic Tag Kit
Dynamic HTML Attrributes Repeater New
Query Control
Swatches Widget New