Slide Animation

Slide Animations are applied to the slide's main background image (or video poster/cover) when the slide appears into view.

Legend
  • 1. Animation Category
  • 2. Category Choices
  • 3. Selected Animation(s)
  • 4. Animation Settings

To preview an animation, first select a category (1).  Then hover your mouse over one of the choices (2), and a small live preview of the animation will appear.

Once you find an animation you’d like to use for the slide, select its checkbox (2), and then it will appear in the “Used Transitions” list (3).

If you wish, you can select multiple animations for the current slide, and the slide will alternate between the selected animations in order each time the slide is shown within the slider.

When multiple animations have been chosen, select one from the list to adjust its individual settings.

To remove the selected animation, click the “x” icon.

And drag the arrow icons with your mouse to position the selections on top of one another, which will change the order of the selected animations.

Animation Settings

The animation settings that will be applied to the selected animation (see screenshot above for example).

  • Quick Note
    The first two settings, "Slot / Box Amount" and "Slot Rotation" are only applicable to animations from the "Slots And Boxes", "Curtain" and "Premium Transitions" categories.
Slot / Box Amount

Represents the number of “pieces” the image is divided into for these animations.  Applicable to animations from the “Slots And Boxes”, “Curtain” and “Premium Transitions” categories.

Click the option field for a special menu to help make your selection.  “Thumbs Up” is the recommended choice.

Slot Rotation

Applies a starting rotation to the slot-based animation.  Applicable to animations from the “Slots And Boxes”, “Curtain” and “Premium Transitions” categories.

Click the option field for a special menu to help make your selection.  “Thumbs Up” is the recommended choice.

Animation Duration

How long the animation will last from start to finish in milliseconds (1000 = 1 second).

An optimal number will depend on your chosen animation.  For example, when using a simple “Fade”, a number between 300-500 is usually best, but for more complex animations (especially when using an “easeInOut” easing), a higher number such as 500-1000 will work well.

Easing In / Easing Out

Easing In:

The easing applied when the background animates into view.

Easing Out:

The easing applied when the background animates out of view (on slide change).

“Easing” is what gives a web animation that “real life” type of movement.  Choose between over 35 options to see which one you like best.

The most commonly used options are “Power2.easeOut”, and “Power3.easeOut”.