How to add split text animations to Figma banners using Bannerify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can add animated split text animations to your Figma banners, which will allow you to animate your text layers either character by character, word by word, or even line by line.

To get started, all we need to do is go to our Figma file, click on the actions icon at the bottom here, and then if you just search for Bannerify. Under the Figma plugins tab, if you click on the Bannerify item, to run the Figma plugin, you can either click on this run button down here, or I’d recommend clicking on the save icon next to that. That’ll let you save the Figma plugin to run from your Figma plugins list. I already clicked on that button, so I’m just going to go to my Figma canvas, right-click anywhere, and go down to plugins, then go down to saved plugins and click on the Bannerify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically takes any frames on your current Figma page and treats those as banners that you can load into the Figma plugin. In this case, I’ve just got this one frame. I’m going to keep it simple and just load that one up by clicking on the load check banners button down here. Once it loads up, you’ll notice that all of the content layers inside of the banner frame have automatically been loaded up into the Bannerify timeline, which will allow you to animate those layers using the tools in the Figma plugin. You can see that I’ve got a few animations already applied to the banner. In this case, I just want to add some new text animations, which are going to allow me to change these fade-in animations to split text animations. This is really easy to do.

Now, you can basically just find any text layer in your timeline. Go to the exit or entry animation options in the timeline settings here and just open either of those up. If you scroll down past all of these entrances, you’ll come to a new section called split text. This is going to give you a bunch of different options for animating the text content into different kinds of animations. You can see here I’ve got a bunch that’s animating the text characters individually. I’ve got some that’s animating in the words, animating each word word by word. We’ve also got some that animate per line, animating per line. There are a few different options there.

All we need to do is basically just select any of these animations. In this case, I’m just going to click this one. Now, if we replay that, you’ll see here that the text is animating in word by word. Similarly, I can use those animations for my exit animations as well. I can just click on this one here underneath that. If I scroll down to the split text group again, you can see that I’ve got those same animations, but basically just in reverse order. That’s going to animate out the text instead of animating it in. I can just pick any of those right now and click on that. If I play that back in the timeline, you’ll see that in the preview, it’s animating that text out character by character in this case. That’s looking really good. Again, if I play that all in one go, you can see it’s animating it in word by word and then animating it out character by character.

Now that we’ve got these animations working really well, what we can do is export these out from the Figma plugin. There are a couple of different options you’ve got here. The first one is if you want to export it to GIF or video, you can do that. You can click on the export to GIF/video button. Select the format you want. You can either pick MP4, GIF, WebM, or any of these other animated formats here. In this case, I’m just going to pick MP4 and keep that selected. I’m just going to leave everything else default and then click on the export MP4 button. That’s going to automatically go through and put together that animation into a video file that we can then download to the computer. I’m just going to click on the download your zip file button, save that to my desktop. In this case, I’m going to unzip that zip file and then open up the folder. You’ll see here that we’ve got an MP4 file that we can then play. You can see our text animation is coming in really nicely there and fading out as we’d expect as well.

We’ve got a nice little preview page we can load up as well. If you’ve got multiple banners, this will automatically play all those back at the exact same time. That’s a really nice way to share previews with clients and things like that. If you need to export it to HTML, you can do that as well. You can just click on the export to HTML button. Importantly, as you might have noticed in the options down here, it says GAP only in brackets when we see the split text options. GSAP basically means the GreenSock Animation Platform. This is a particular kind of library that needs to be loaded in for these text animations to work. By default, the platform is going to be selected to HTML and CSS. This one will not work with these particular split text animations. It’ll work fine with all the other animations, but in this case, we’ve got these split text ones.

What we need to do is change this code output option from the default one to the HTML GAP/GreenSock option. You’ll see this little cape icon here when you know that’s the selected one that we want. Once you’ve got that GAP option selected, you can go ahead and click on the export banner button. That’s going to automatically generate all of the HTML code, all of the JavaScript, all of the image assets, and then you can again just open that up, double-click on the zip file, and then you’ll have your banners in here. I can now just drag that into the browser, and you can see the animations are working really well. That’s going to include those split text animation layers and animate them really smoothly.

Just to reiterate, if you are using any of these split text animations which are now in the Bannerify Figma plugin, the only format you can use for HTML is the one with the GreenSock option included. Unfortunately, any of these platform options down here, for example, Google Ads and things like that, unfortunately, they’re not going to currently support the GAP option. This might be something that’s available in the future, but a lot of these platforms also block third-party libraries from being included as well. In the meantime, just be sure to select the HTML GreenSock Animation option in the code output settings when you export the banner from the Figma plugin. That’s going to ensure that your HTML animations work really well with the new split text animation properties.

That’s basically it. I just wanted to run through that really quickly. I know a bunch of people have been really interested in these types of animations where you can do split text either through characters, words, or even full lines. This is going to be a really easy way for you to apply those animations without needing to hand-code them yourself. Just to reiterate, this example is on multiple lines, but if you only need one line of text, for example, or two lines, this will work as well. Just make sure that you’ve got the text layer set to the same size as the actual text. In the layout options here, you just want to make sure those are kind of hugging the text rather than having something crazy like this where there’s just a huge bounding box around the text. Just make sure it’s nice and tight alongside the text for the best results. You can basically apply this to those as well. If we refresh this one, you’ll notice that the words still come in perfectly and the characters will also be animated out.

You can basically do this for multiple lines or single lines. It just depends on what kind of animation you’re looking for, and you should hopefully be able to find an option that suits the kind of use case that you’re looking for under this new split text animation setting option here. We’ll leave it there for today. Keep that one a fairly quick one.