Animation Basics

Let's learn about the basics of animations in snappify Slides.


snappify Slides enables you to create beautiful animations with ease. It comes with smooth transitions out-of-the-box and gives you the ability to adjust them to your liking.

Let's dive into the mechanics of animations in snappify Slides πŸ‘‡

Different types of Animations

We distinguish between three different types of animations in snappify Slides:

  • Entry Animations: When an element first appears on a Slide (doesn't exist on the previous Slide)
  • Exit Animations: When an element disappears from a Slide (doesn't exist on the next Slide)
  • Change Animations: When an element changes from one Slide to another (exists on the previous Slide)

You'll be able to configure these animations in the snappify Editor when you've selected an element and switch to the Animation tab on the right toolbar. You'll only be able to configure the animations which are applicable to the currently selected element.

For example, if you've selected an element which exists on the previous Slide, you'll only be able to configure the Change animation and not the Entry animation, because it won't have any effect.

Transition Options

On every type of animation, doesn't matter if it's an entry, exit or change animation, you can set the following options:

  • Duration: How long the animation should take
  • Delay: When the animation should start
  • Easing: The easing function of the animation
  • Bounce: The bounce intensity of the animation

Change Animations

When an element changes its state from one Slide to another, snappify will smoothly animate the change. For example when you change the position of an element, it will be animated smoothly.

Via the above described Transition options you're then able to e.g. change the duration, easing or bounciness of the animation of the selected element.

Screenshot of the Change Animation options
Screenshot of the Change Animation options

But how do we tell snappify that an element is the same on two different Slides? Let's take a look on how to link elements between Slides πŸ‘‡

At the moment there are two ways to tell snappify that an element is the same on two different Slides and should therefore be animated:

  • Duplicate a Slide: When you duplicate a Slide, snappify will automatically link all elements between the two Slides.
  • Copy & Paste: When you copy an element from one Slide and paste it on another Slide, snappify will also link the two elements.

The linking will only apply to the first element you copy or duplicate. If you duplicate an element twice, the second element won't be linked, hence it would have an Entry animation as it doesn't exist on the previous Slide.

Entry Animations

When an element doesn't exist on the previous Slide, there's no state to animate from. Therefore snappify provides you with several entry animations which you can choose from. By default the Fade animation will be applied.

Again you're able to configure the above mentioned Transition options for each entry animation.

Screenshot of the Entry Animation options
Screenshot of the Entry Animation options

Let's take a look at the different entry animations you're able to choose from per element πŸ‘‡

Fade

The element will smoothly fade in, animating the opacity from 0 to the value which has been set on the element itself via the Advanced Style properties.

Video showcasing the Fade Entry animation

Slide

The element will slide in from the left, right, top or bottom, depending on the direction you've chosen.

You're also able to configure the distance the element should slide in from, corresponding to its destination position.

Video showcasing the Slide Entry animation

Scale

The element will scale in or out from the center of the element.

You're also able to configure the scale distance, corresponding to its destination scale.

Video showcasing the Scale Entry animation

None

No entry animation will be applied, the element will just appear on the Slide.

You're still able to configure the delay of the animation, so that the element will only appear after a certain amount of time.

Exit Animations

When an element doesn't exist on the next Slide, there's no state to animate to. Therefore you're able to also configure an Exit animation for each element.

Basically there are the same option available for Exit animations as there are for Entry animations, but they get applied in the reversed order.

Screenshot of the Exit Animation options
Screenshot of the Exit Animation options
Any questions?
Don't hesitate to ask them! πŸ‘‡