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: Using the live preview - See your custom animation in real-time as you adjust keyframes and properties.. Machine-readable page: /bannerify/animation/live-preview.md.

Using the live preview

See your custom animation in real-time as you adjust keyframes and properties.

Video Tutorial: Add custom animations to your Figma banner designs

This video walks through how to add custom keyframe animations to your banners using the Bannerify plugin.

To See how your animation is looking based on the keyframes and their properties that you've updated, you can look at the Live Preview area, which sits right next to your keyframe properties, and directly underneath the animation timeline. Any changes you make to your keyframes, properties or easing will automatically be shown in the live preview.

You can adjust the playback speed of the live preview. If you want to see how your custom animation looks at different speeds, you can change the playback speed in the live preview by dragging the Preview Speed slider left and right to increase and decrease the playback speed.