Split text animations

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

Video Tutorial: Add split text animations to Figma banners

This video walks through how to add split text animations (by character, word, or line) to Figma banners using the Bannerify plugin.

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, Google Font, or a custom font with a direct .woff / .woff2 URL added in Bannerify's custom fonts panel
  • 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.

Custom font URLs ​

If your text layer uses a custom brand font that is not available as a web-safe font or Google Font, add a direct .woff or .woff2 font file URL in Bannerify's custom fonts panel.

The URL must point directly to the font file itself, such as https://example.com/fonts/client-font.woff2. A normal font page, download page, CSS file, or ZIP file will not work in this field.

Bannerify detects the custom font styles used by Split Text layers and lists each font style once, so you can paste the URL for that font style instead of adding the same URL to every text layer.

To open the custom fonts panel:

  1. Apply a Split Text animation to the custom-font text layer.
  2. Click Configure Fonts in the warning under the banner preview, or hover over the text layer in the timeline and click Fonts.
  3. Paste the direct .woff or .woff2 URL for each listed font style.
  4. Click Done, then preview or export again.

Bannerify uses those font URLs to render the Split Text preview, canvas/video exports, and HTML / GSAP exports. For HTML / GSAP exports, Bannerify also adds the matching @font-face rule automatically.

You can still choose Split Text animations on custom-font layers before adding the font URL. Bannerify will show a warning under the banner preview until a valid .woff or .woff2 URL is added.

If you previously added a custom Split Text font URL directly on a text layer, Bannerify automatically moves that saved URL into the new custom fonts panel when you open it.

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
  • 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.

If the only issue is a custom font with no valid .woff / .woff2 URL, Bannerify lets you select the Split Text animation and shows a warning instead of hiding the option.

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, or only need a custom .woff / .woff2 font URL

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.