← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to add custom cubic bezier easing curves to Bannerify custom animations in Figma. It demonstrates creating a custom animation, pasting a generated cubic bezier rule into Bannerify, previewing the motion, and exporting the banner as a GIF/Video or HTML preview.

Things you'll need

• Figma
• Bannerify Figma plugin

Steps

1. Open Bannerify from Figma by finding it in Resources or from Plugins > Saved Plugins.
2. Load the Figma frames you want Bannerify to treat as banners so their layers appear in the timeline.
3. Click Custom Animations to open the keyframe editor and build an animation with keyframes.
4. Set the animation easing to Cubic Bezier and paste in a custom CSS cubic bezier rule copied from a cubic bezier generator site.
5. Name the animation and click Add new animation, then assign it to a layer such as a CTA button under the Custom group.
6. Edit the saved animation if needed, then click Update saved animation to apply the changes.
7. Copy and paste the animation to other matching layers, apply it, and export the result using Export to GIF/Video or HTML.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Setting the animation easing
• Next: Add Lottie animations to Figma banner exports
• Open Bannerify in the Figma Community