Split text effects

Split-text animations are using SplitText plugin and allow you to animate text elements by characters, words and lines. AF supports all SplitText parameters that GSAP has.

GSAP SplitText

Make sure that you have SplitText plugin loaded before AF is initialized. AF will throw an error if SplitText is not loaded. SplitText is a separate GSAP plugin, so you need to include it separately.
Installation

How it works

af-splittext attribute is used to specify the parameters of SplitText. You can either use simplified shorthand syntax:

<div af-splittext="chars,words,lines" af-from="x: 100" af-to="x: 0"></div>

Here you specify how you want to split the text — chars, words or lines (or any combination of them). You can also specify target for which the split text will be applied using af-target, and animation (af-from, af-to, af-keyframes) that will be applied to the letters/words/lines. Or, you can supply any supported parameters for SplitText object, like this:

<div af-splittext="chars: true, words: true, lines: true, target: .box"></div>

and any animation (af-from, af-to, af-keyframes). Shorthand syntax works nice if you want to save time, object syntax allows for more flexibility. You can also combine split text animations with scroll-triggered animations, so that animation you specify will be triggered by scroll trigger — just add af-scroll attribute to the element.

Examples

Split text animation
Split text animation by letters with scroll trigger.