← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to use the Bannerify Figma plugin to add masked entrance and exit animations to banner layers. It also covers exporting the finished banner as HTML, GreenSock/GSAP, Google ads, GIF, or video.

Things you'll need

• Figma
• Bannerify Figma plugin

Steps

1. Open Figma, click the Resources icon, search for Bannerify, and save or run the plugin.
2. Right-click on the canvas, go to Plugins, and open Bannerify.
3. Select the parent frame or artboard you want to use, then load the checked banner so Bannerify treats its layers as animation elements.
4. For each layer, open the entrance and exit animation controls and choose a masked animation, such as a square, wipe, or circle effect. For an eased circular exit with an origin inset from the top-left corner, choose Circle Out Upper Left (Ease).
5. Adjust the direction, timing, and delays on layers to create staggered masked entrances and exits.
6. Preview the result in Bannerify to check the masking effect.
7. Export the banner using Export to HTML, GreenSock or GSAP, or an ad platform such as Google ads, or export it as GIF or video.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Selecting animations
• Next: Add split text animations to Figma banners
• Open Bannerify in the Figma Community