Creating custom keyframe animations

Creating a new custom animation ​

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

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 on a keyframe under the Animation Timeline near the top of the custom animations panel. Clicking on a keyframe will allow you to edit the properties for that specific keyframe.

Inserting new keyframes ​

You can easily add more keyframes in between the default start/end (0%/100%) keyfarmes to create more complex keyframe animations. To add a new keyframe to your timeline, enter your new keyframe percentage (eg. 50) in the input field, then click on the Insert New Keyframe button to insert a brand new keyframe at that percentage in the timeline.

Any new keyframe that you add will automatically be created with the same properties that your currently selected keyframe contains; this allows you to easily 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.
  • The Y property will animate your element's top/bottom pixel position.
  • 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.

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.

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. Please 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.

Using the live preview to see your animation ​

To easily 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.

Setting the animation easing ​

You can choose what kind of easing you need your animation to have by choosing an option from the 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

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

Using your saved custom animations ​

Once you've saved at least one custom animation, you will be able to use them in your slides by clicking on 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.

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.

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

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.