Animation Starts with Layers
One of the most important functions of layers is to facilitate animation.
Table of Contents
Getting into Animation
As we have learned, Slider Revolution has various types of layers [?]
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. available to add and organize content within your modules [?]
A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.
A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.
A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.
Multiple modules can be combined to form rich content such as complete sites and landing pages.. The next important foundational concept to learn is how to enable animation, from which you can make the most of Slider Revolution’s impressive visual capability.
Animation Overview (Video Tutorial)
Everything covered in this section of the manual about animation can be learned by watching the “A Closer Look at Slider Revolution’s Module Editor, Slides & Layers” tutorial video from the 13:34 mark:
If you watched the above video in full you can skip the remainder of the A Closer Look section of the manual and proceed to Module Editing Basics.
Or, continue reading to learn more about Slider Revolution’s animation tools:
Two Step Animation Process
Every layer added to a slide [?]
A "slide" in Slider Revolution is a container into which multiple layers can be added, with layers in turn acting as containers for various forms of media such as images, text, video, audio, buttons, and special effects.
Slides are added to modules and edited via the module editor.
Within the module editor, each slide has its own animation timeline, background and collection of layers.
A single module can have one or many slides. A module with one slide is called a scene, and a module with multiple slides is called a slider or carousel. automatically comes with tools that make animating it a simple 2-step process:
- Decide on a starting state for the layer, aka Anim From.
- Decide on a finishing state for the layer, aka Anim To.
![](https://www.sliderrevolution.com/wp-content/uploads/2020/06/anim_from.png)
Slider Revolution will then automatically take care of everything for you, animating the layer between its starting and finishing states.
For example, you might set a text layer’s starting state (Anim From) to be yellow, small, and on the left side of the slide.
![](https://www.sliderrevolution.com/wp-content/uploads/2020/08/animation_animfrom-1.png)
You then might set its finishing state (Anim To) to be blue, large and on the right side of the slide.
![](https://www.sliderrevolution.com/wp-content/uploads/2020/08/animation_animto-1.png)
Slider Revolution will then automatically animate:
- A transition from yellow to blue, passing through intermediate colors like green along the way
- A change in size, growing from small to large size
- A shift in position, moving from the left side of the slide to the right
This 2 step process can be performed multiple times per layer to create multiple animations, and for each of these animations you will see a corresponding strip appear on the layer’s track in the 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. By default a newly added layer has two such strips, one animating its entrance into the slide, and another animating its exit from the slide.
This layer driven animation process is simple but incredibly powerful, because of four main factors:
- The variety of states you can change and animate between
- The controls available for animation timing
- The ability to have as many or as few animation strips per layer as you please
- Additional, next level animations provided via special effects
We’ll be digging into the power of Slider Revolution animation in much more depth as we go along, but for now, that covers the most important elements of how it works.
Next: Get Productive Fast
Now that we have all the foundational concepts for working with Slider Revolution, it’s time to get into the practical side of editing modules.
First though, let’s go over what you’ll be learning in our section on module editing basics.