---
url: "/bannerify/tutorials/add-split-text-animations-to-figma-banners.md"
description: "This tutorial shows how to use the Bannerify Figma plugin to add split text animations to banner text layers, including character-by-character, word-by-word, and line-by-line effects. It also explains how to export those banners as MP4, GIF, WebM, or HTML with the HTML GreenSock Animation option required for split text animations."
---

# Add split text animations to Figma banners

> This tutorial shows how to use the Bannerify Figma plugin to add split text animations to banner text layers, including character-by-character, word-by-word, and line-by-line effects. It also explains how to export those banners as MP4, GIF, WebM, or HTML with the HTML GreenSock Animation option required for split text animations.

[← Back to Bannerify Video Tutorials](/bannerify/tutorials)

[Embedded media](https://www.youtube.com/embed/NrzaotL5IMw)

**What this video covers**

This tutorial shows how to use the Bannerify Figma plugin to add split text animations to banner text layers, including character-by-character, word-by-word, and line-by-line effects. It also explains how to export those banners as MP4, GIF, WebM, or HTML with the HTML GreenSock Animation option required for split text animations.

**Things you'll need**

- A Figma file with at least one frame to load into Bannerify.
- Bannerify installed as a Figma plugin.

**Steps**

1. Open your Figma file, search for Bannerify from the actions icon, and run or save the plugin, then launch it from saved plugins.
2. Load the current Figma frame into Bannerify by clicking the load banners button so the frame contents appear in the timeline.
3. Select a text layer in the timeline and open the entry or exit animation settings.
4. Scroll to the split text section and choose an animation that splits text by characters, words, or lines.
5. Preview the animation, then apply a matching split text option for the exit animation if needed.
6. Export the banner as MP4, GIF, WebM, or another animated format, or choose export to HTML and switch code output to the HTML GreenSock Animation option before exporting.
7. Download and open the exported files to verify the animation playback.

**Useful links**

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=NrzaotL5IMw)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-add-split-text-animations-to-figma-banners-using-bannerify)
- [Browse Bannerify tutorial docs](https://docs.hypermatic.com/bannerify/tutorials)