Manual

The fundamentals of using Slider Revolution.

Inserting “TO” Animations Between the “IN” and “OUT” Animations

Learn how to create as many additional animations as you need.

Table of Contents

The Basics of Animation (Video Tutorial)

Everything covered in the ‘Fundamentals of Animation‘ section of the manual can also be learned by watching the ‘Animation Basics’ tutorial video below. You can learn how to add additional TO animations starting at the 14:59 mark:

If you watched the above video in full you can skip the remainder of the ‘Fundamentals of Animation‘ section of the manual and proceed to Ensuring Responsiveness.

Or, continue reading to learn how to add additional TO animations to the timeline.

Adding “TO” Animations

As well as the IN and OUT animations you get on every layer [?] Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.

Layers are added to slides via the module editor.
, you can also add extra animations between them, known as TO animations. You can think of this sequence of animations as a layer coming IN, moving TO a state, then TO another state, then moving OUT.

The part of the editor used to add extra animations between the IN and OUT animations isn’t visible by default. In order to see it, first make sure you are in the Animation settings for your layer, looking at the Keyframes panel. (Refer to The Fundamentals of Animation in Slider Revolution for how to access these settings).

Then hover over the Anim To button of the IN animation. You will see a small blue button with a “+” symbol on it:

Click the “+” button and a new animation will be added between the IN and OUT animations, with the word TO on its left side (default name is “Keyframe#”). You will also see it appear on your timeline [?] The timeline is the section of the module editor dedicated to animation and controlling the stacking order of layers.

From this part of the editor animations can be added, adjusted and previewed. Additionally, layers can be selected from the timeline, and can be dragged and dropped up and down on the timeline to modify which appear in front and which behind.

It can be equally compared to both a timeline in a typical video editing application, and a layers panel in a typical graphic design application
, a little to the right of the IN animation:

The new animation is added, visible in the Keyframes panel and on the timeline.

TO animations are like OUT animations, in that they define only one state. The layer will transition from the TO state of the previous animation.

Add More “TO” Animations

To add more TO animations, after any existing TO animation, hover over its button in the Keyframes panel and you’ll see the blue “+” button again”:

Clicking it will add another TO animation after the one you hovered over, below it in the Keyframes panel, and to its right in the timeline:

Delete a “TO” Animation

To delete a TO animation, click it in the Keyframes panel to select it then click the little bin icon at the bottom of the panel:

You can view the process of deleting an animation strip in the below ‘Animation Basics’ tutorial video at the 17:55 mark:

Rename a “TO” Animation

To rename a TO animation, click it in the Keyframes panel to select it, go to the Basics panel, then click in the Frame Alias field and type the name you would like:

You can view the process of renaming an animation strip in the below ‘Animation Basics’ tutorial video at the 17:11 mark:

Next: Create Animations Quickly with Presets

Animations can be created by manually configuring their state setting, but they can also created very efficiently by choosing from a collection of premade animations. We’ll learn how to apply these presets on the next page.

Inserting “TO” Animations Between the “IN” and “OUT” Animations