Manual

Advanced Layer Animation Options

We’ll start by stepping you through the options contained in the Layer tab of the Advanced panel: 

We’ll also cover the three additional panels that appear when the Layer tab is selected: Layer Filter panel, Layer Back-Drop Filter panel, and Slide Direction Based Mirroring panel.

Layer Tab

Opacity

The Opacity option is used to set the transparency of the currently selected animation keyframe for the selected layer <sup>[?] 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.</sup>:

Opacity can be set between 0, meaning completely transparent, and 1, meaning completely opaque.

If a keyframe is set to 0 Opacity and the next is set to 1, the animation will fade in from transparent to opaque:

Conversely if a keyframe is set to 1 Opacity and the next keyframe is set to 0, the animation will fade out from opaque to transparent:

Clicking the three dots at the right end of the Opacity field opens a drop-down with three shortcuts for priming the value: Inherit, Random {min,max}, and Custom:

Inherit

The Inherit setting inherits an Opacity value from the previous keyframe. 

For example, the IN animation’s Anim From keyframe might have its Opacity set to 0.5:

In this case, the next keyframe is the IN animation’s Anim To keyframe.

If that Anim To keyframe has its Opacity set to Inherit, it will automatically inherit the previous value of 0.5 from the Anim From keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s Opacity a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum Opacity and max is the maximum Opacity.

For example, a setting of {0,1} means the keyframe will get a random Opacity value between 0 and 1:

When the animation runs the keyframe might appear anywhere between fully transparent to fully opaque:

A setting of {0.2,0.8} means the keyframe will get a random Opacity value anywhere between 0.2 and 0.8. When the animation runs the keyframe might appear anywhere between mostly transparent to mostly opaque:

Custom

The Custom option allows you to manually set the value in the Opacity field:

Note: Typing a value directly into the Opacity field at any time will automatically switch the field to the Custom setting.

TranslateX

The TranslateX option allows you to set the horizontal position of the currently selected animation keyframe: 

A positive value will shift the position of the animation keyframe horizontally to the right.

A negative value will shift the position of the animation keyframe horizontally to the left.

This position is relative to the layer’s base X position, as set in the Size & Position sub-section:

The layer’s base X position is depicted in the canvas <sup>[?] The canvas is the point and click design space in the module editor. It forms the largest area of the module editor.

In this area layers can be selected, moved and resized. Animations can also be previewed.</sup> by a smaller black and white border, while the keyframe’s TranslateX is depicted by a purple border.

For example, if the base X position is 100px and TranslateX is set to 20px, the actual horizontal position of the layer will end up being 120px:

Conversely, if the base X position is 100px and TranslateX is set to -20px, the position of the layer will end up being 80px:

Clicking the three dots at the right end of the TranslateX field opens a drop-down with eight shortcuts for priming the value: px, %, Inherit, Random {min,max}, Wrapper Left, Wrapper Right, Wrapper Center, and Cycles [val|val|val]:

px

Choosing the px shortcut primes the TranslateX field for input of a pixel based value:

Modify by replacing the primed value with a new value followed by a px at the end.

%

Choosing the % shortcut primes the TranslateX field for input of a percentage based value:

Modify by replacing the primed value with a new value followed by a % at the end.

A percentage based TranslateX value will be relative to the width of the text layer.

For example, if the layer is 600px wide and the TranslateX value is 50%, the layer will be offset to the right by 300px:

Inherit

The Inherit setting inherits a TranslateX value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s TranslateX a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum TranslateX value and max is the maximum TranslateX value:

For example, a setting of {-20,20} means the keyframe will get a random TranslateX value between -20px and 20px. When the animation runs the keyframe might be offset anywhere between 20px to the left and 20px to the right:

Wrapper Left

Selecting Wrapper Left will align the right edge of the layer with the left edge of the wrapper:

The left edge of the wrapper is determined by whether Layer Align is set to Layer Area or Scene for the layer:

In the following example, Layer Align is set to Layer Area, and Wrapper Left has been applied to our ‘TranslateX’ text layer, resulting in the right edge of the layer aligning with the left edge of the wrapper:

Applying the above Wrapper Left settings to the Anim To keyframe of a text layer results in the following animation:

Note: You can learn more about Layer Align in the following intermediate editing tutorial: Adding and Configuring Image Layers.

Wrapper Right

Selecting Wrapper Right will align the left edge of the layer with the right edge of the wrapper:

Just as described above under Wrapper Left, the right edge of the wrapper is determined by whether Layer Align is set to Layer Area or Scene for the layer. The width of the wrapper can be seen on the canvas as the space between the two vertical blue-dotted lines for each device layout.

In the following example, Layer Align is set to Layer Area, and Wrapper Right has been applied to our ‘TranslateX’ text layer, resulting in the left edge of the layer aligning with the right edge of the wrapper:

Wrapper Center

Selecting Wrapper Center will align the center of the layer with the center of the wrapper:

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

TranslateY

The TranslateY option allows you to set the vertical position of the currently selected animation keyframe: 

A positive value will shift the position of the animation keyframe vertically downward.

A negative value will shift the position of the animation keyframe vertically upward.

This position is relative to the layer’s base Y position, as set in the Size & Position sub-section:

The layer’s base Y position is depicted in the canvas by a smaller black and white border, while the keyframe’s TranslateY is depicted by a purple border.

For example, if the base Y position is 100px and TranslateY is set to 20px, the actual vertical position of the layer will end up being 120px:

Conversely, if the base Y position is 100px and TranslateY is set to -20px, the position of the layer will end up being 80px:

Clicking the three dots at the right end of the TranslateY field opens a drop-down with eight shortcuts for priming the value: px, %, Inherit, Random {min,max}, Wrapper Top, Wrapper Bottom, Wrapper Middle, and Cycles [val|val|val]:

px

Choosing the px shortcut primes the TranslateY field for input of a pixel based value:

Modify by replacing the primed value with a new value followed by a px at the end.

A pixel based TranslateY value will be added to the layer’s base Y position to give the final vertical position. For example, if we use the default TranslateY px value of 50px, the layer will be offset downward from its base position by 50px:

%

Choosing the % shortcut primes the TranslateY field for input of a percentage based value:

Modify by replacing the primed value with a new value followed by a % at the end.

A percentage based TranslateY value will be relative to the height of the layer.

For example, if the layer is 100px high and we use the default TranslateY % value of 100%, the layer will be offset downward by 100px:

Inherit

The Inherit setting inherits a TranslateY value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s TranslateY a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum TranslateY value and max is the maximum TranslateY value:

For example, a setting of {-20,20} means the keyframe will get a random TranslateY value between -20px and 20px. When the animation runs the keyframe might be offset anywhere between 20px upward and 20px downward:

Wrapper Top 

Selecting Wrapper Top will align the bottom edge of the layer with the top edge of the wrapper:

The top edge of the wrapper is determined by whether Layer Align is set to Layer Area or Scene for the layer. You can learn more about Layer Align in the following intermediate editing tutorial: Adding and Configuring Image Layers.

Note: When the bottom edge of a layer is aligned with the top edge of the wrapper, the layer is positioned outside the wrapper and is therefore not visible.

Wrapper Bottom

Selecting Wrapper Bottom will align the top edge of the layer with the bottom edge of the wrapper:

The bottom edge of the wrapper is determined by whether Layer Align is set to Layer Area or Scene for the layer. You can learn more about Layer Align in the following intermediate editing tutorial: Adding and Configuring Image Layers.

Note: When the top edge of a layer is aligned with the bottom edge of the wrapper, the layer is positioned outside the wrapper and is therefore not visible.

Wrapper Middle

Selecting Wrapper Middle will align the middle of the layer with the middle of the wrapper:

Note: Selecting Wrapper Middle will prime the TranslateY field with the center value.

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols [val|val]:

TranslateZ

The TranslateZ option allows you to modify the layer’s size at the currently selected animation keyframe. It can be used to give the layer the appearance of having 3D depth, with the ability to come closer or move further away:

A positive value will increase the size of the layer, making it seem to come closer or zoom in:

A negative value will reduce the size of the layer, making it seem to move further away or zoom out:

The strength of the zooming effect depends on the value of the module’s <sup>[?] 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.</sup> Layer Perspective Globally option, found under the Module General Options tab, Layout sub-section, Advanced Settings panel:

The lower the perspective value the more intense the zooming will be, and the higher the perspective value the less intense the zooming will be.

Clicking the three dots at the right end of the TranslateZ field opens a drop-down with four shortcuts for priming the value: px, Inherit, Random {min,max}, and Cycles [val|val|val]:

px

Choosing the px shortcut primes the TranslateZ field for input of a pixel based value:

Modify by replacing the primed value with a new value followed by a px at the end.

Inherit

The Inherit setting inherits the TranslateZ value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s TranslateZ a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum TranslateZ value and max is the maximum TranslateZ value:

A setting of {-100,100} means the keyframe will get a random TranslateZ value between -100px and 100px. When the animation runs the keyframe might either zoom in or zoom out.

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

scaleX

The scaleX option is used to scale the layer’s width at the selected animation keyframe:

Clicking the three dots at the right end of the scaleX field opens a drop-down with four shortcuts for priming the value: 1, Inherit, Random {min,max}, and Cycles [val|val|val]:

1

By default, the scaleX field is set to 1, which means the keyframe will have 100% of the layer’s base width:

A value higher than 0 and lower than 1 will scale the width down. For example, a value of 0.5 will scale the width to 50% of the layer’s base width:

A value above 1 will scale the width up. For example, a value of 2 will scale the width to 200% of the layer’s base width:

A value of 0 will scale the layer to zero, effectively making it invisible.

Inherit

The Inherit setting inherits the scaleX value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s scaleX a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum scaleX value and max is the maximum scaleX value:

A setting of {0,2} means the keyframe will get a random scaleX value between 0 and 2. When the animation runs the keyframe might either shrink to nothing or grow to double width.

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

You will notice when scaleX values are adjusted in isolation, layer content can appear stretched or squashed. If you want to retain layer aspect ratio, then any value change applied to scaleX should also be applied to scaleY.

scaleY

The scaleY option is used to scale the layer’s height at the selected animation keyframe:

Clicking the three dots at the right end of the scaleY field opens a drop-down with four shortcuts for priming the value: 1, Inherit, Random {min,max}, and Cycles [val|val|val]:

1

By default, the scaleY field is set to 1, which means the keyframe will have 100% of the layer’s base height:

A value higher than 0 and lower than 1 will scale the height down. For example, a value of 0.5 will scale the height to 50% of the layer’s base height:

A value above 1 will scale the height up. For example, a value of 2 will scale the height to 200% of the layer’s base height:

A value of 0 will scale the layer to zero, effectively making it invisible.

Inherit

The Inherit setting inherits the scaleY value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s scaleY a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum scaleY value and max is the maximum scaleY value:

A setting of {0,2} means the keyframe will get a random scaleY value between 0 and 2. When the animation runs the keyframe might either shrink to nothing or grow to double height.

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

skewX

The skewX option is used to skew the layer’s shape horizontally at the selected animation keyframe:

A positive value will skew the shape to the left, i.e. the top of the shape will move left while the bottom moves right:

A negative value will skew the shape to the right, i.e. the top of the shape will move right while the bottom moves left:

Clicking the three dots at the right end of the skewX field opens a drop-down with four shortcuts for priming the value: px, Inherit, Random {min,max}, and Cycles [val|val|val]:

px

Choosing the px shortcut primes the skewX field for input of a pixel based value:

Modify by replacing the primed value with a new value followed by a px at the end.

Inherit

The Inherit setting inherits the skewX value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s skewX a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum skewX value and max is the maximum skewX value:

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

skewY

The skewY option is used to skew the layer’s shape vertically at the selected animation keyframe:

A positive value will skew the shape down, i.e. the right edge of the shape will move down while the left edge moves up:

A negative value will skew the shape up, i.e. the right edge of the shape will move up while the left edge moves down:

Clicking the three dots at the right end of the skewY field opens a drop-down with four shortcuts for priming the value: px, Inherit, Random {min,max}, and Cycles [val|val|val]:

px

Choosing the px shortcut primes the skewY field for input of a pixel based value:

Modify by replacing the primed value with a new value followed by a px at the end.

Inherit

The Inherit setting inherits the skewY value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s skewY a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum skewY value and max is the maximum skewY value:

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

rotateX

The rotateX option is used to rotate the layer around the X axis, i.e. the horizontal axis:

The option is set in degrees(deg) of rotation.

A positive value will appear to tip the shape backwards in 3d space:

A negative value will appear to tip the shape forwards in 3d space:

Clicking the three dots at the right end of the rotateX field opens a drop-down with four shortcuts for priming the value: px, Inherit, Random {min,max}, and Cycles [val|val|val]:

px

Despite the fact px typically represents pixel values, in this case choosing the px shortcut primes the rotateX field for input of a degrees(deg) based value:

Modify by replacing the primed value with a new value followed by a deg at the end.

Inherit

The Inherit setting inherits the rotateX value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s rotateX a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum rotateX value and max is the maximum rotateX value:

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

rotateY

The rotateY option is used to spin the layer around the Y axis, i.e. the vertical axis:

The option is set in degrees(deg) of rotation.

A positive value will appear to spin the shape counter clockwise in 3d space, i.e. the right edge will appear to move away while the left edge comes closer:

A negative value will appear to spin the shape clockwise in 3d space, i.e. the left edge will appear to move away while the right edge comes closer:

Clicking the three dots at the right end of the rotateY field opens a drop-down with four shortcuts for priming the value: px, Inherit, Random {min,max}, and Cycles [val|val|val]:

px

Despite the fact px typically represents pixel values, in this case choosing the px shortcut primes the rotateY field for input of a degrees(deg) based value:

Modify by replacing the primed value with a new value followed by a deg at the end.

Inherit

The Inherit setting inherits the rotateY value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s rotateY a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum rotateY value and max is the maximum rotateY value:

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

2D Rotation

The 2D Rotation option is used to rotate the layer in 2D space. 

The option is set in degrees(deg) of rotation:

A positive value will appear to spin the shape clockwise:

A negative value will appear to spin the shape counter-clockwise:

Clicking the three dots at the right end of the 2D Rotation field opens a drop-down with four shortcuts for priming the value: px, Inherit, Random {min,max}, and Cycles [val|val|val]:

px

Despite the fact px typically represents pixel values, in this case choosing the px shortcut primes the 2D Rotation field for input of a degrees(deg) based value:

Modify by replacing the primed value with a new value followed by a deg at the end.

Inherit

The Inherit setting inherits the 2D Rotation value from the previous keyframe:

Random {min,max}

The Random {min,max} setting allows you to give the keyframe’s 2D Rotation a random value each time the animation runs. The value is set as a range, in the format {min,max}, where min is the minimum 2D Rotation value and max is the maximum 2D Rotation value:

Cycles [val|val|val]

The Cycles [val|val|val] setting format allows you to set multiple values for a single keyframe to transition through for the course of its duration. Each value should be added between square braces, separated by pipe symbols: [val|val]:

Transform Origin X/Y/Z

Each of the options described above that performs scaling, skewing or rotating applies a kind of operation to a layer called a “transform”. 

Whenever a transform is applied, it is made relative to a set of invisible axes in 3D space called the “transform origin”. The three axes that make up the transform origin are the X axis (horizontal), Y axis (vertical), and Z axis (depth):

The transform origin determines the layer’s position of origin in 3D space, and behaves like an anchor around which transforms are made. That in turn affects where the layer ends up after the transform is complete.

By default, a layers transform origin sets each of the three axes directly through its center.

However, the X axis (horizontal), Y axis (vertical), and Z axis (depth) that make up the transform origin can be modified by altering the following three options, respectively: Transform Origin X, Transform Origin Y and Transform Origin Z:

In the following example, if you increase the scaleX option for a layer’s Anim To keyframe to a value of 2, it will widen horizontally by an equal amount to each side. This is because the default origin at its center acts like an anchor:

However, if you change Transform Origin X from its default of 50% down to 0% the X axis will be moved to the left edge of the layer. The effect of increasing the scaleX option to 2 will then widen the shape entirely out to the right side:

Conversely, if you change Transform Origin X to 100% the X axis will be moved to the right edge of the layer. The effect of increasing the scaleX option to 2 will then widen the shape entirely out to the left side:

Layer Filter Panel

When using the options available in the Layer tab, the Layer Filter panel will also appear below the Advanced panel. Here you will find the Use Filter option:

Use Filter

The Use Filter option will be OFF by default. Toggle User Filter to ON to display four additional options: Blur Filter, Grayscale, Brightness, Set Filters on Mask:

These additional options allow you to animate the selected layer’s blur, grayscale and brightness.

Blur Filter

The Blur Filter option allows you to apply a Gaussian blur:

The value is set in pixels(px), where the higher the number the wider and more intense the blur will be.

Grayscale

The Grayscale option allows you to apply grayscale coloring:

The value is set as a percentage(%) where 0% represents no grayscale applied, (i.e. full color), and 100% represents grayscale fully applied, (i.e. no color).

Brightness

The Brightness option allows you to make the layer brighter or darker:

The value is set as a percentage(%) where values below 100% darken the layer, 0% turns the layer black, and values above 100% brighten the layer.

Set Filters on Mask

When Use Filter is toggled ON, the Set Filters on Mask option will also appear:

This option is provided as a troubleshooting method if you are having rendering issues in Safari browser.

To read more about this option read our guide on how to Adjust Image Rendering Issues on Safari Browser.

Layer Back-Drop Filter Panel

When using the options available in the Layer tab, the Layer Back-Drop Filter panel will appear below the Layer Filter panel. Here you will find a second Use Filter option:

Use Filter

The Use Filter option allows you to use a layer to create an area that applies filtering to any layers behind it.

To use this option the layer will need to be partially or fully transparent so you can see the area that is receiving the filtering effect.

Toggle Use Filter to ON to display five additional options: Blur Filter, Grayscale, Brightness, Sepia and Invert:

These additional options allow you to animate the selected layer’s blur, grayscale, brightness, sepia and color inversion.

Blur Filter

The Blur Filter option allows you to apply a Gaussian blur:

The value is set in pixels(px), where the higher the number the wider and more intense the blur will be.

Grayscale

The Grayscale option allows you to apply grayscale coloring:

The value is set as a percentage(%) where 0% represents no grayscale applied, (i.e. full color), and 100% represents grayscale fully applied, (i.e. no color).

Brightness

The Brightness option allows you to make the layer brighter or darker:

The value is set as a percentage(%) where values below 100% darken the layer, 0% turns the layer black, and values above 100% brighten the layer.

Sepia

The Sepia option allows you to apply sepia coloring:

The value is set as a percentage(%) where 0% represents no sepia coloring, and 100% represents full sepia coloring.

Invert

The Invert option allows you to invert coloring. Red will be inverted to cyan, green to magenta, blue to yellow, black to white, and white to black:

The value is set as a percentage(%) where 0% represents no color inversion, and 100% represents full color inversion. Values in between 0% and 100% will appear grey.

Slide Direction Based Mirroring Panel

It’s possible to take an IN or OUT animation that moves in a certain direction and have it play in a mirrored direction, depending on whether a visitor is moving forward or backwards through a module.

For example, you might have a layer that slides in from the left for its IN animation. By activating Slide Direction Based Mirroring, when the slider <sup>[?] A slider is a type of module that contains multiple slides. You can only see one slide at a time, a distinguishing features that makes sliders different from carousels.

The slides of a slider can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.</sup> is made to go backwards the layer would mirror its IN animation and slide in from the right side instead.

Because this functionality only relates to IN and OUT animations, the Slide Direction Based Mirroring panel only appears when the Anim From keyframe of the IN animation is selected, or the Anim To keyframe of an OUT animation:

The panel can be found below the Layer Back-Drop Filter panel:

Note: You will not see the Slide Direction Based Mirroring panel below the Layer Back-Drop Filter panel if you are editing the Anim To keyframe of an IN animation.

Here you will find seven toggle-based options: TranslateX, TranslateY, rotateX, rotateY, 2D Rotation, skewX and skewY.

You can decide which of these options to toggle to ON depending on the kind of movement used in the IN or OUT animation you wish to mirror.

For example, if the animation slides horizontally it is translating on the X axis, so you should activate the TranslateX option: