Skip to content

Split text animations

Animate text by characters, words, or lines in Bannerify, with the current setup steps, supported layer rules, and export caveats.

Using split text animations

Bannerify includes a dedicated set of Split Text animations for text layers. These let you animate text by characters, words, or lines instead of moving the whole layer as one block.

To apply one:

  1. Add a normal Figma text layer to your banner.
  2. Load the layer into your Bannerify timeline.
  3. Click the entry or exit animation select box for that text layer.
  4. Open the Split Text (GSAP Only) group.
  5. Choose the split text animation you want.
  6. Preview the result in Bannerify and adjust the timing if needed.

For the cleanest final output, use HTML / GSAP export when you want Bannerify's dedicated split text runtime.

Entry and exit pairing

You can use split text on the entry animation, the exit animation, or both.

  • Entry and exit split text animations stay in the same order in the select lists so they are easy to pair.
  • Exit labels are mirrored where possible, such as Type On / Type Off, Rise / Fall, and Reveal / Conceal.
  • For best results, make sure your exit animation starts after the entry animation has finished.

Supported text layers

Split text is only available when the selected layer can be safely prepared as rich HTML text.

Your text layer should be:

  • a normal text layer
  • using a web-safe font or Google Font
  • free from inline text links
  • free from list formatting
  • free from text format overrides
  • not using Bannerify's scrollable text mode

If you change a supported layer back to an unsupported font or unsupported text setup later, Bannerify will keep the selected split text animation on the layer, but mark it as unavailable until the layer becomes eligible again.

When split text is unavailable

Bannerify will block split text on layers in any of these situations:

  • the selected layer is not a text layer
  • the layer has a format override
  • Scrollable Text is enabled on that layer
  • the text contains inline links
  • the text is formatted as a list
  • the font is not a web-safe font or Google Font
  • Bannerify cannot prepare the text layer for split text preview

When this happens, Bannerify will show the reason directly in the plugin UI instead of silently applying the animation.

Bulk apply, paste, and numpad shortcuts

Split text follows stricter rules than normal animations when you apply it to multiple layers at once.

  • Every selected layer must be a text layer
  • Every selected text layer must already be eligible for split text

This rule applies to:

  • Bulk apply
  • Copy / paste animations
  • Numpad shortcut apply actions

If even one selected layer is unsupported, Bannerify will block that split text action and show a warning.

Preview and export notes

Bannerify labels this group as Split Text (GSAP Only) because HTML / GSAP exports use Bannerify's dedicated split text runtime.

In current versions:

  • Bannerify preview supports split text
  • current canvas-rendered export paths can also render split text
  • HTML / GSAP export is still the best option when you want the most faithful text-based split animation output

Best results

  • Use split text most often on short headlines, callouts, or compact copy.
  • Keep intentional line breaks in mind, because line-based split animations follow the rendered text layout.
  • Preview the animation at the final banner size before exporting.