Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: 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.. Machine-readable page: /bannerify/tutorials/add-split-text-animations-to-figma-banners.md.

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

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