Creating custom keyframe animations

If you need a specific animation that isn't available in the animation presets included in Bannerify, you can create your own custom timeline animation by adding custom keyframes with your own X, Y, Scale, Rotation and Opacity 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.

Opening the custom animations panel ​

To open the custom animations panel, click on the Custom Animations button in the main Bannerify header. This will open up the custom animation panel, where you'll be able to start adding your own keyframe animation.

Creating custom animation keyframes ​

When you open the animations panel, you'll see 2 keyframes; the first keyframe (0%) and the final keyframe (100%). These are added by default and can't be removed, as a keyframe animation needs at least one frame to start the animation from and a keyframe to show where it ends.

Selecting a keyframe to edit ​

You can instantly swap between any keyframes by clicking a keyframe under the Animation Timeline near the top of the custom animations panel. Clicking a keyframe will allow you to edit the properties for that specific keyframe.

Inserting new keyframes ​

To add a keyframe between the default start and end points, enter its percentage (for example, 50) and select Insert New Keyframe.

Any new keyframe that you add will automatically be created with the same properties that your currently selected keyframe contains; this lets you Adjust properties based on other keyframes you've already added. Your newly added keyframe will also be automatically selected after you click the Insert New Keyframe button.

Editing keyframe properties ​

You can edit 5 different properties for any of your animation keyframes. Any differences in properties between your keyframes will automatically be animated. For example, setting scale to 2x on the 0% keyframe, and setting scale to 1x on the 100% keyframe will automatically create a "shrinking" animation.

  • The X property will animate your element's left/right pixel position (in pixels).
  • The Y property will animate your element's top/bottom pixel position (in pixels).
  • The Opacity property will animate your element's transparency percentage.
  • The Rotate property will animate your element's rotation degrees.
  • The Scale property will animate your element's size.

Using Percentage Based Relative X/Y Transforms ​

If you would prefer to set X/Y positioning based on the percentage of the animated element, you can enable the Relative % Transforms toggle in the keyframe properties panel, which will allow you to set a percentage value for your X/Y values (instead of pixels).

Applying a percentage X/Y transform value will automatically animate the element that the animation is applied to by using its position, and applying the percentage transform to that size. For example, setting a 10% X transform value on a keyframe will animate a layer that's 100px wide, by 10px. Applying that same animation with a 10% X transform value to a layer that's 200px wide, will animate the layer by 20px.

Splitting Scale into X/Y Scale Options ​

If you would prefer to set the scale values for each X/Y axis individually, you can click the Unlock Scaling toggle in the keyframe properties panel, which will allow you to set the horizontal and vertical "Scale" values for your keyframes independently, rather than equally scaling them both for an even scale up or down animation.

This setting can be useful if you need to animate the width or height of a layer, without also affecting other X/Y axis at the same time.

Using the live preview to see your animation ​

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.

Copying and pasting keyframe properties ​

You can copy/paste properties from one keyframe to another by first selecting the keyframe you would like to copy the properties from, clicking the Copy Properties button, then selecting the keyframe you would like to paste the copied properties to, then clicking the Paste Properties button to paste the copied properties onto the selected keyframe.

Copied properties are only available until the panel is closed. You can copy and paste properties from/to any keyframes in your animations while the custom animations panel is open, any copied properties will be not be available to paste after you close the custom animations panel.

Deleting keyframes ​

To delete an keyframe, click any keyframe under the Animation Timeline to select it, then click on the Delete Keyframe button to delete your keyframe from the timeline. Note, that you can't delete the 0% or 100% keyframes, as these are default keyframes required for your animation timeline.

After you delete any keyframe, the 0% keyframe will automatically be re-selected as the active keyframe to edit.

Deleting a keyframe animation will permanently delete it. When you delete any of your keyframes, it will be permanently removed from your timeline and you won't be able to undo the deletion. However, you are able to Copy Properties of a keyframe, delete it, then paste your deleted properties in a different keyframe while you're still editing your animation timeline.

Setting the animation easing ​

You can choose what kind of easing you need your animation to have by choosing an option from the Animation Easing select box. Easing is automatically applied to your entire timeline, and will update the Live Preview area so you can see how your selected easing changes how your keyframe animation moves.

You can choose from the following easing options:

  • Ease (Default)
  • Linear
  • Ease In
  • Ease Out
  • Ease In Out
  • Cubic Bezier

Setting a custom Cubic Bezier easing value ​

Video Tutorial: Add cubic bezier easing to banner animations in Figma

This video walks through how to add custom cubic-bezier easing to banner animations in Figma using the Bannerify plugin.

If you select the Cubic Bezier easing option, you need to paste in a valid CSS cubic-bezier value (for example, cubic-bezier(0.65,0.05,0.36,1);). You can generate a custom cubic beizer curve, by using a site like https://easings.co/, or any other website service that you prefer to help to generate custom CSS cubic-bezier curves.

Setting the animation origin point ​

By default, the origin for all of your custom animation will be set to Center and Center for the X/Y axis, but you can customize these by clicking the Animation Origin Point select input options, where you can set Top, Center or Bottom for the vertical axis, and Left, Center or Right for the horizontal axis.

Changing the animation origin will affect where the animation is "pinned" for the layer. For example, setting the origin to Top and Left would become the point for your layer at which a rotation animation is hinged on, or the point of your layer that could be scaled in/out from and to.

Saving your new custom animation ​

To save your new animation, give your animation a name by filling in the New Custom Animation Name input text field, then click the Add New Animation

Custom animations will only be saved/available to the current Figma file. Saving an animation makes it available to any page inside your current Figma file. However, your saved animations won't show up if you run Bannerify inside a completely different/new Figma file, as the animations are saved directly to the Figma file and can't be transferred to another file. You will need to re-create any new animations in any new Figma files. Alternatively, you could setup a new page in the current Figma file, where your saved custom animations from this Figma file will still be available to use.

Using your saved custom animations ​

Once you've saved at least one custom animation, you can use them in your banners by clicking the entry animations and exit animations select boxes in your layers timelines; you will see a new group in the select box options called Custom Animations, where you'll be able to see all of the custom animations that you've saved.

Bulk applying custom animations As with other preset animations, you can also apply your custom animation in bulk by using the bulk apply feature.

Updating your saved animations ​

To update a custom animation that you've previously saved, choose the animation you'd like to update from the Your Saved Animations select box; this will load up your saved animation and its keyframes into the custom animation panel.

Once you've chosen the saved animation, you can edit your keyframes and properties as needed. Once you're happy with the updates, click the Update Saved Animations button to save the changes and override the previous animation keyframes.

Note, updating a saved animation will automatically apply the updated keyframes to any layers in your banners that was already using the custom animation you've just updated.

Create a new animation based on a saved animation. If you want to load in a saved animation and modify it, but not "override" the saved version, you can create a new animation from it by entering in a New Custom Animation Name and clicking the Add New Animation button.

Deleting your saved animations ​

To delete an animation, select any option under Your Saved Animations to load in the animation, then click on the Delete Saved Animation button to delete your saved animation.

Deleting a saved animation will permanently delete it and remove it from your layers. When you delete any of your saved animations, it will be permanently removed from Your Saved Animations list. Any layers in your banners that were using the deleted custom animation will be changed back to having no animation applied.