About Layer Slider Transition Builder

Layer Slider supports various types of slide transitions. The Transition Builder offers you an easy-to-use visual editor to create your own transitions in your own liking. Transitions created with this editor will automatically appear in list of the available transition when you are editing sliders.

Transition builder
Transition builder

Getting Started

We've included tooltips for every settings, just point over options fields with your mouse to receive addition information. Please read them carefully, it will help you getting started with the available options.

Sample Transitions

When you first open the Transition Builder, it will have some samples to help you to get started. We've included some really simple and some more advanced transitions as well to demonstrate the plugin capabilities.

About previews

We wanted to create you a super easy-to-use visual editor, so we included a real-time preview feature. Just click on the "Enter Preview" button, and it will immediately show you the result based on your settings. This way you can easily determine which settings responsible for which effect. Keep playing with the settings and you will discover almost unlimited possibilities.

3D Transitions - Animation sets

The 3D transitions are made up with 3 animation steps to create more-complex transitions with multiple actions. The "animation" step is required, but the "before animation" and "after animation" steps are optional. You can use them to do some preparation before the animation starts or restore back some settings after it is done.

To help you understand what are these steps, here is a simple example:

  • Before the animation starts, you may want to scale down columns
  • Then rotate them to left
  • Finally, you want them to scale up back

If you want a really simple transition, you don't have to use all the steps. In this case, please make sure to untick the "Enabled" checkboxes for the corresponding steps.

Easings

Easings are timing functions of the animations, you can manipulate the objects movement with it. Please visit this page to find out more about easings and see real-time examples.