Smooth Transition Settings

Smooth Transition can be applied to 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 in a gentle way. Your creating a transition effect will improve the user experience and by choosing the # content as a selector, the header and footer will not change and the transition between the pages will 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 pages, this article can help you understand what it is depending on the theme you are using, it is very simple.

In the "Selector Wrapper" field you must enter the css selector (.class or #id) that you want to animate when changing the page.

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

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

When the selector matches, it will be detected in green. From now on, the parameters for configuring 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 <a href> which do not contain the value href = "..." will be used:

  • target="_blank"
  • #
  • empty ""
  • uploads
  • mailto
  • tel

In addition, the <a> tags which have 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
  • Filp Bottom

Overlay effect

The overlay effect is a layer which enter comes in and out unvealing the content in creative ways 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 overlay.


Easing equations


Loading Spin

 The Loading Debug allows to display the loading in order to manage its look and feel. (Remeber 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

Still need help? Contact Us Contact Us