Smooth Transition
Updated over a week ago

On WordPress v5.6 jQuery was updated to a new version and Smooth Transition doesn't work correctly.

It is not possible to use the Smooth Transition in the new interface because Elementor has not yet made available the possibility for developers to integrate Global Settings.

Smooth Transition can be applied to the entire site.

To configure the settings, you will need to reach them from the hamburger menu at the top left of the Elementor interface of each Elementor Editor page.

Here you can configure Smooth Transitions by enabling the setting and this will be valid for the whole site.


Smooth Transition allows you to manage the animated transition between pages. Your transition effect will improve the user experience and by choosing the # content as a selector, the header and footer will not change. The transition between the pages will still be intuitive and captivating.

The technology behind this is not ajax but native DOM Load. Therefore, the URL will change and SEO will not be affected.

Selector wrapper

The basic setting is to indicate the CSS selector of the wrapper that must transform during the passage between the page.

Read this article. It can help you understand what it is depending on the theme you are using.

In the "Selector Wrapper" field you must enter the CSS selector (.class or #id) that you want to animate when you switch pages.

N.B. only one, multiple-choice is not permitted for now.

With no selector on the page, there will be no result.

When the selector matches, it will be detected in green.

From now on, the parameters for the configuration of the smooth transition will be available.


The Target, [a href] & CLASS

It is the sequence of CSS selectors that operate to manage the click event.
You could only use one like .smothtransition, in this case, the selector is simply (a.smoothtransition)

If you leave the default value, all ( which do not contain the value href = "...") will be used:

  • target="_blank";

  • #;

  • empty "";

  • uploads;

  • mailto;

  • tel.

In addition, the tags with the following classes are excluded:

  • no-transition;

  • gallery-lightbox;

  • ocean-lightbox;

  • elementor-clickable;

  • elementor-icon;

  • is-lightbox.

You can implement or manage it at any time as you see fit to.

Default:

a:not([target="_blank"]):not([href=""]):not([href^="uploads"]):not([href^="#"]):not([href^="mailto"]):not([href^="tel"]):not(.no-transition):not(.gallery-lightbox):not(.elementor-clickable):not(.oceanwp-lightbox):not(.is-lightbox):not(.elementor-icon)


Animations

  • OUT;

  • IN.

The animation style in both directions:

  • Fade;

  • Right;

  • Left;

  • Top;

  • Bottom;

  • Zoom Back;

  • Zoom Front;

  • Flip Right;

  • Flip Left;

  • Flip Top;

  • Flip Bottom.


Overlay effect

The overlay effect is a layer that unveils the content like a sort of curtain.

These are the available styles:

  • Top;

  • Bottom;

  • Left;

  • Diagonal (under construction);

  • Circle (under construction);

  • Wave (under construction);
    โ€‹

  • Dual (under construction);

You can apply a color or an image as an overlay.


Easing equations


Loading Spin

The Loading Debug allows displaying the loading in order to manage its look. (Remember to switch it off after your operating)

There are three loading modes:

  • A circle spinning during the loading;

  • An image animated during the loading;

  • None.


Responsive

You can apply the SmoothTransition based on the device:

  • Desktop;

  • Tablet;

  • Mobile.

Did this answer your question?