Manual

The fundamentals of using Slider Revolution.

Search
Generic filters

Customizing Distortion Effects

Learn how to use the options that generate dynamic, vibrant distortion effects in Slider Revolution

Customizing or Making Your Own Distortion Effects

On the previous page of the manual we saw how distortion effects from the default preset library can be applied to a slide background.

After applying a distortion effect, there are several ways you can customize it to suit the module design you are creating.

And when you have a distortion effect you love, you can save it as a custom preset and use it again any time you want.

In this guide we’ll cover all the available configuration options you can use to customize or make your own unique distortion effects.

But before we get into that, let’s quickly go over how you can manage custom presets.

Note: Every option discussed in this guide can be found in the Slide Options tab, Distortion sub-section:

Managing Custom Presets

After customizing a particle effect it can be saved as a custom preset in the Distortion Effects Library for use later. Let’s see how.

Saving a Custom Preset

To save a custom preset, click to expand the Distortion Effects Library and Custom Presets, then click the line labeled Custom Settings (Click to Save as Preset):

The line will turn blue and placeholder text such as “Give name” or “custom” will appear:

Replace that text with a name for your custom preset, then click the tick at the end of the line:

Your custom preset will be saved and you’ll now see it listed under Custom Presets:

Deleting a Custom Preset

If you need to delete a custom preset, hover over it, then click the bin icon at the end of the line:

Customizing Distortion Settings

The Distortion sub-section contains five panels of options that can be used to configure custom distortion effects:

Those panels are:

Let’s dig into the options each panel contains and what those options control.

Distortion Effect Panel

Above the Distortion Effect Library described above, two other options are found in the Distortion Effect panel:

Use Slide BG Settings

The Distortion addon uses the slide’s background image for the distortion effect. The size and position of this image are automated by default.

If you would instead like to manually set the size and position of that background image, toggle the Use Slide BG Settings to ON :

The Distortion addon will now use the BG Fit and Position settings found under Slide Options tab, Background sub-section, Image Settings panel.

If you need further help with background image sizing and posititioning, refer to the BG Image section of our guide on Standard Styling to learn more.

Note: If Use Slide BG Settings is toggled to OFF, the background image will revert to default settings. In this case, if your canvas and preview background images don’t match, set your background image’s BG Fit option to Contain, and Position to horizontally and vertically centered.

Draw Using

The Draw Using option controls the type of rendering used to create the distortion effect, and has two possible settings:

The option is set to Default Image by default. This setting will be appropriate for use in most circumstances.

If you are having any compatibility issues between your distortion effects and regular slide transitions, you can try changing the Draw Using option to Canvas. This can provide enhanced compatibility, but at the cost of some performance, so it’s advised to only use this setting when necessary.

Distortion Map Panel

The Distortion Map panel is where you can create a distortion effect, which you do by creating something called a Distortion Map.

The distortion map defines the shape and pattern of ripples and movement that are to be applied to your slide’s background image.

For example, here are two instances of the same background image, each with a different distortion map applied:

The distortion map is created by applying various settings to a grayscale (black and white) image known as an Image Map.

You can think of the image map as being like a stamp, in that the shapes it contains will be transferred onto the distortion effect. To give you a visual, you can imagine it as working like an old fashioned wax seal stamp that imprints a pattern:

The reason for the image map being black and white is, in short, that the white or lighter areas of the map will cause distortion moving in one direction, while the black or darker areas will cause distortion moving in the opposite direction. To add to the wax seal stamp analogy, you can think of light and dark areas representing the high and low parts of the stamp.

For example, this is what the “Spiral” image map looks like:

When you look at an effect created using the spiral image map, notice how its shapes appear in the distortion pattern it generates:

The options available for configuring a distortion map are found in the Distortion Map panel:

  • Image Map
  • Map Size
  • Image Scale
Image Map

The Image Map drop-down option provides a quick way to select a preset Image Map:

To add a new Image Map using a custom image of your own, click the Image Map drop-down, scroll to the bottom of the list of presets, select Custom Map:

Then click the Media Library button:

This will open the standard WordPress media window, from which you can select the image you want to use. Whilst not strictly essential, for best results the image should be grayscale, i.e. black & white.

Once selected, the custom image map will appear below the Media Library button:

Note: The presets available in the Image Map drop-down do not include custom images. To access a previously created Custom Map, first select the Distortion Effect Library drop-down, then select the Custom Presets drop-down, and then select the required Custom Preset

Map Size

We mentioned earlier how the image map can be thought of as like a stamp that imprints a pattern onto the distortion effect. To take that analogy further, the size of the image map in turn determines the size of the “stamp”.

The larger the image map, the larger the pattern that gets transferred into the distortion map. The smaller the image map, the smaller the pattern.

For example, here is the difference between using the small and large size versions of the “Glitch” image map:

Glitch image map with Map Size set to small.
Glitch image map with Map Size set to large.

Use the Map Size option’s drop-down to choose between Small or Large versions of the default Image Maps:

Note: The Map Size option will not be available if you are using a Custom Map. Instead, you’ll need to use an image already at your preferred size.

Image Scale

Use the Image Scale option to modify the scale of the slide’s background image:

The option can be set as a percentage between50% (reduces the size of your background image) and150% (increases the size of your background image). 

If Use Slide BG Settings is set to ON in the Distortion Effect panel, values used in the Image Scale field will have no effect. In this case you will need to go to the Slide Options tab, then the Background sub-section, then the Image Settings panel, and then adjust the BG Fit and Position options there instead.

Note: The Image Scale field only modifies the scale of the slide’s background image. Modifying the scale of the distortion effect that is applied to the background image can be done separately in the Animation Settings panel, and/or the Slide Transition panel, and/or the User Interaction panel.

Animation Settings Panel

One of the ways a distortion effect can be created is as an ongoing distortion animation that automatically plays throughout the duration of the slide.

To apply a distortion animation go to the Animation Settings panel and toggle the Active option to ON:

Once active, a number of additional options are displayed below:

These options are used to configure the type of animation that will be applied to your Distortion Map:

  • Distortion Speed X / Y – Set linear, i.e. horizontal and vertical, movement speeds. 
  • Distortion Scale X / Y – Set the scale of the distortion effect. 
  • Distortion 2D Rotation – Set the degree of 2D rotational movement.

The way a distortion animation is created is through using these options to control the scale, position and rotation of the distortion map over time.

Distortion Speed X / Y 

The Distortion Speed X and Distortion Speed Y options add horizontal and/or vertical movement, respectively, to your distortion map over time:

As the distortion map moves, the pattern it imprints onto the background image will move along with it. For example, here we have the “Maze” pattern moving horizontally across the background image at a speed of 2ms:

Values for the two distortion speed options are set in milliseconds (ms), and any value greater than 0ms will generate movement. Conversely, if you don’t want any linear movement, leave these options set to 0ms.

Values in the X field control horizontal movement speed. Positive values give generate left-to-right movement, and negative values generate right-to-left movement.

Values in the Y field control vertical movement speed. Positive values generate downward movement, and negative values generate upward movement.

The higher the value in either the X or Y fields, the faster the effect. For example, a value of 3ms will result in faster movement than a value of 1ms.

Note: If you don’t apply any linear movement, you can still create an animated effect with rotational movement instead. This is done by setting both the Distortion 2D Rotation option and at least one of the Distortion Scaling X / Y options to a value greater than zero. These options are further explained below.

Distortion Scale X / Y

The Distortion Scale X and Distortion Scale Y options add horizontal and/or vertical scaling to the effect created by your distortion map:

A full explanation of exactly what distortion scale does would be a little too long and technical to fit in this guide, but you can think of it as controlling the strength of the distortion effect on the horizontal and vertical axes.

The values for Distortion Scale are added as percentages (%), and any value other than 0% will affect the strength of the distortion scale effect.

Values in the X field control the effect on the horizontal axis. 

Values in the Y field control the effect on the vertical axis.

For example, here we have the small version of the “Maze” pattern with scaling of 5% on both axes, and as you can see the effect is very subtle:

Distortion Scale X & Y fields set to 5%.

If the scaling is increased to 50% the effect becomes much more noticeable:

Distortion Scale X & Y fields set to 50%.

And at 500% scale the effect is quite extreme:

Distortion Scale X & Y fields set to 500%.

Because scale effectively controls the strenth of the distortion effect, if both the X and Y options are set to 0% the “strength” is also zero, meaning you won’t see any distortion effect at all. At least one of these options has to be set to a non-zero value for any distortion effect to occur.

Negative percentage (e.g. -10%) values will invert the distortion effect, i.e. the original effect will be mirrored on the axis in question.

Note: Unlike the distortion speed or rotation options, the Distortion Scale options don’t actually create any animation, i.e. they don’t cause movement. As such, if you use scaling but don’t add any linear or rotational movement your distortion effect will be visible but totally stationary. With some distortion maps this can look good, but bear in mind with some configurations a stationary distortion effect may cause your background to appear broken or displaced.

Distortion 2D Rotation

The Distortion 2D Rotation option adds rotational movement to your distortion map over time:

Values are set in degrees (deg).

Positive values (e.g. 1deg) rotate the distortion map clockwise. 

Negative values (e.g. -1deg) rotate the distortion map anti-clockwise.

As the distortion map rotates, the pattern it imprints onto the background image will rotate along with it. For example, here we have the “Glitch” pattern rotating at a rate of 0.2deg:

The higher the value, the faster the rotation. For example, a value of 2deg will result in faster rotation than a value of 0.5deg

Note: If the Distortion Scale X / Y fields are set to zero (0), any value used in the Distortion 2D Rotation field will have no effect.

Slide Transition Panel

It’s possible to create a distortion based transition effect that will play both at the beginning and end of a slide.

To make use of this feature, go to the Slide Transition panel toggle the Active option to ON:

A number of additional options will be displayed:

Use these options to configure the distortion effect as it appears during slide transitions:

  • Easing
  • Duration
  • Speed X/Y Offset
  • Scale X/Y Offset
  • Rotation X/Y Offset
  • 2D Rotation Offset
  • Enhanced Distortion

There are two ways this slide transition distortion effect can work.

The first way is if the Animation Settings panel is active. If so, in the beginning slide transition the distortion effect will animate from the values set in the Slide Transition panel to those set in the Animation Settings panel. In the ending transition this will reverse, animating from the Animation Settings values to the Slide Transition values.

For example, if we select the “Clouds Small” preset from the Distortion Effect Library you’ll see that during slide transition its settings will animate scale from 200% to 5%, and linear movement from 0ms to 2ms:

This generates the following slide transition effect:

The second way is if the Animation Settings panel is not active. If so, in the beginning slide transition the distortion effect will animate from the values set in the Slide Transition panel to the plain default version of the background image. In the ending transition this will reverse, animating from the plain image to the Slide Transition values.

Easing

Easing helps to smooth out transition animations by influencing the starting speed of the transition as well as the speed of deceleration at the end of the transition. 

Click the Easing drop-down, then select your preferred easing preset:

The easing effect will be applied automatically during the transition.

Duration

The Duration option allows you to specify in milliseconds(ms) the total amount of time for which the transition animation will run:

Speed X / Y Offset

The Speed X / Y Offset options control the linear movement speed of the distortion effect during slide transitions:

The Speed X / Y Offset options correspond with the Distortion Speed X/Y options in the Animation Settings panel. Both sets of options are configured in the way described in the section: Distortion Speed X / Y 

Scale X / Y Offset

The Scale X / Y Offset options enable you to adjust the scale of the distortion effect during slide transitions:

The Scale X / Y Offset options correspond with the Distortion Scale X/Y options in the Animation Settings panel. Both sets of options are configured in the way described in the section: Distortion Scale X / Y

2D Rotation Offset

The 2D Rotation Offset option controls the 2D rotational movement of the distortion effect during slide transitions:

The 2D Rotation Offset option corresponds with the Distortion 2D Rotation option in the Animation Settings panel. Both options are configured in the way described in the section: Distortion 2D Rotation

Enhanced Distortion

The Enhanced Distortion option is set to OFF by default:

Toggle it to ON to increase the power of the distortion effect during the slide transition animation. 

You can use this option to quickly and easily increase the impact of the values you’ve set for each option in the Slide Transition panel.

User Interaction Panel

You can optionally have user interaction generate a distortion based effect. This can be triggered by either mouse movement or mouse clicking.

To make use of this feature, go to the User Interaction panel toggle the Active option to ON:

A number of additional options will be displayed:

Use these options to configure the distortion effect upon user interaction:

  • Disable Mobile
  • Mouse Event
  • Easing
  • Duration
  • Speed X/Y Offset
  • Scale X/Y Offset
  • 2D Rotation Offset

There are two ways a user interaction distortion effect can work.

The first way is if the Animation Settings panel is active. If so, upon user interaction the background will animate from the distortion values set in the Animation Settings panel to those set in the User Interaction panel, and then back again when user interaction stops.

For example, if you look at the settings used in the “Ripple Large” distortion preset you’ll see that upon mouse movement it will animate scale from 20% to 200%, and linear movement from 2ms/20ms to 0ms:

This generates the following change in the distortion effect when the mouse moves:

The second way is if the Animation Settings panel is not active. If so, upon user interaction the background will shift from the plain default version of the background image to the distortion effect configured in the User Interaction panel, and then back again when user interaction stops.

For example, the “Glitch” distortion preset only shows an effect upon mouse movement:

Disable Mobile

Toggle the Disable Mobile option to ON to disable the ability for a user to interact with the distortion effect when using a mobile device: 

Note: This does not disable user interaction in Slider Revolution’s mobile layout preview.

Mouse Event

The Mouse Event drop-down option allows you to choose the method by which a user can interact with the distortion effect:

Select Mouse Down to modify the distortion animation when a user clicks their left mouse button.

Select Mouse Move to modify the distortion animation when a user moves their mouse across the background image on the slide.

Easing

The Easing option provides a quick and easy way to smooth out the start and end of the distortion effect that animates upon user interaction. 

Click the Easing drop-down, then select your preferred easing preset:

Note: Certain Easing presets can override certain animations. For this reason it is a good idea to configure all other options first, and then select your preferred Easing preset.

Duration

The Duration field allows you to specify in milliseconds(ms) the  amount of time that the change to the distortion effect will run for upon user interaction:

Typically a shorter Duration (e.g. 300ms) will work better for user interaction than a longer Duration (e.g. 5000ms), as a shorter duration is more likely to allow the distortion animation to run in full before the user interacts again.

Speed X/Y Offset

The Speed X / Y Offset options control the linear movement speed of the distortion effect in response user interaction:

The Speed X / Y Offset options correspond with the Distortion Speed X/Y options in the Animation Settings panel. Both sets of options are configured in the way described in the section: Distortion Speed X / Y 

Scale X/Y Offset

The Scale X / Y Offset options control the scale of the distortion effect in response user interaction:

The Scale X / Y Offset options correspond with the Distortion Scale X/Y options in the Animation Settings panel. Both sets of options are configured in the way described in the section: Distortion Scale X / Y

2D Rotation Offset

The 2D Rotation Offset option controls the 2D rotational movement of the distortion effect in response user interaction:

The 2D Rotation Offset option corresponds with the Distortion 2D Rotation option in the Animation Settings panel. Both options are configured in the way described in the section: Distortion 2D Rotation

Learn More from Templates

To learn more about working with the Distortion Addon, one of the best things you can do is explore with some of our ready-made templates that put the addon into action. Try starting with the Distortion Effect Slider Template.

Customizing Distortion Effects

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.