Divi Transitions

Page transitions designed for Divi, Extra and the Divi Builder plugin

Transitions designed for Divi, Extra and the Divi Builder
Reliable transitions that work correctly with the back button and new tabs
Fade to background and Block Out effects

Lifetime license. Nothing more to pay.
Automatic updates. 90 day money back guarantee.

Effective Page Transitions in Divi

Divi Transitions is a new plugin that aims to bring effective page transitions to Divi.

Fade to Background

The plugin's default transition is "Fade to Background". When the user leaves the page, rather than hanging around for a while, the current page content is gracefully faded out. 

Once the content fades out, the user will see the background color or image set in Divi, which makes it the perfect opportunity for building a bit of brand awareness.

Block Out

Looking for something more striking? Then the block out transition may be just the thing. When the user leaves the page, the old content will be erased with random blocks until it is gone. 

While it will usually be best to match the block color to the Divi background color (as that is what users will see when the next page starts to load), you're not limited to it. You can choose any block color you desire, even semi-transparent.

Integrated into Divi

Divi Transitions is easy to use and integrated into Divi.

The plugin's configuration settings can be found at:

Divi > Theme Options > Navigation > Transitions

Make your changes, save and your transition will be applied on the front-end. 

FAQs

Wait, what are page transitions?
Page Transitions are effects applied to a webpage when the user navigates between pages. For example, fading the content of the current page out when the user clicks on a link, before the new content is shown.
How do I set the background that gets faded to?
The background can be set in an be set in the Divi background settings located at:

Divi > Theme Customizer > General Settings > Background

Are the transitions reliable? I've had problems with other transitions plugins in the past.

Yes, a key goal of Divi Transitions is reliable transitions that work well with Divi.

Divi Transitions addresses several issues seen in other page transitions plugins:

  • Transition is incorrectly triggered by links where the page is not actually left, e.g. when link opened in a new tab or the link triggers an on-page effect
  • Transition effect (e.g. fade out) remains in place when returning to the page, e.g. using the "back" button.
  • Transitions are being triggered within the visual builder

The root cause of the first two issues is that other page transition plugins typically take the approach of intercepting link clicks, which necessitates handling all the special cases of functionality that links allow. Divi Transitions instead uses a simpler, more reliable method – it triggers the effect only when the browser indicates that the current page is being unloaded.

Divi Transitions is Divi-aware and provides better handling of links in Divi modules and the visual builder that other transitions plugins.

 

Does Divi Transitions delay the page load while showing the animation?
No. Divi Transitions doesn't add a delay for the transition effect this.

Instead, when the browser signals a "beforeunload" event (indicating that it is leaving the page), Divi Transitions immediately adds a class to the page. This class triggers a CSS animation, but the browser won't wait for it to complete – it will get straight to work loading the next page. The animation will run while this is happening, without blocking it.

So Divi Transitions shouldn't slow down the load of the next page at all.

I want a different transition effect - can you add it?
If you'd like to see other transitions added (or any other improvements made), please let me know in the comments and I'll do my best to add it into the plugin.

Divi Transitions

Automatic updates. No recurring fees.
90 day money back guarantee.

Got a Question?

6 Comments

  1. Greetings, the transition plugins I have tried actually add extra time to display the transition which in real time actually slows down the page load between pages. Does your plugin do this? Super thanks for getting back to me.

    Reply
    • Hey Stephen, no Divi Transitions doesn't add a delay for the transition effect this.

      Instead, when the browser signals a "beforeunload" event (indicating that it is leaving the page), my plugin immediately adds a class to the page. This class triggers a CSS fade that lasts for 0.5s, but the browser won't wait for it to complete – it will get straight to work loading the next page. The animation will run while this is happening, without blocking it.

      So my plugin shouldn't slow down the load of the next page at all. Hope that helps!

      Reply
      • Super thanks for your replay, that was what I wanted to hear, sold me!

        Reply
        • You're very welcome, Stephen!

          Reply
  2. Any sample pages so I can see how it works?

    Reply
    • Hey Steven, I've just added a short video to the post above, showing the fade to background transition in action. I hope that helps!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.