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

Add masked animations to Figma banners

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.

← 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 from the new masked animation categories, such as square or wipe effects.
  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