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, Zoom, Wipe, Block out effects and more

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

Divi Show / Hide Button Module
WP 6.5.3 Compatible

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.

Fade In

Divi Transitions includes a Fade In transition which hides the page content until it is ready and then reveals it with a gentle fade in effect. 

It makes transitions feel smoother and adds a touch of refinement to you site. The perfect complement to the Fade to Background Effect.

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.

Wipe In / Wipe Out

Make a bold statement with the wipe in and wipe out transitions which sweep the old page away and reveal the next.

The wipe in and wipe out effect can be enabled separately or, for the best effect, together. Their colors can be independently controlled, as can their wipe direction (out of left, right, up, down, or any of the four diagonals). 

Zoom Out

Add another dimension to your website with the Zoom Out transition. 

With this transition, when the page is exited the content will zoom and fade, ready to be replaced by the next page.

Centered Logo

Take your branding to the next level by displaying your logo prominently as the page loads. With the centered logo effect, the logo will then smoothly glide into position as the page content is revealed.

Works with the Divi default header in the left (default) and centered header formats.

 

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. 

Choose Which Pages Transition

Control where you want your transitions to apply using the "Show Transitions On" setting. Current options are:

  • All Pages (default) – apply your chosen transitions throughout the entire site.
  • Homepage Only – only use the transitions on the front page of your site.

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 delays to the page load to run the transitions. Instead it simply adds styles to apply the effects while the page continues to load as normal.

For exit transitions (e.g. fade to background, wipe out and zoom out), 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 the exit transitions shouldn't slow down the load of the next page at all.

For load transitions (e.g. fade in and wipe in), the page content is loaded as normal without any injected delay. However, these transitions do hide the page content until it has loaded, and then reveal it over the course of a second or so. As such, while the page content loads normally, the time before the page is fully visible increases slightly. For users, the transition effect may serve to reduce the perceived load time by distracting the user from the page load. For search engines, however, the time for the load transition may be seen as an increase in the page load time and for speed critical sites I'd suggest sticking with exit transitions.

 

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?

10 Comments

  1. I the fade out the only transition? What about fade in, wipes, zooms…..

    Gordon

    Reply
    • Hi Gordon, v1.0.4 (just released) adds fade in, wipe out, wipe in and zoom out transitions, in addition to the existing fade to background and block out transitions. I hope that helps!

      Reply
    • Hey David, I’ve taken a look at the link provided, and it appears that you have the fade-to-background transition enabled on a site with a white background. This would result in page content fading out to white when you navigate away from the page, which is what I am currently seeing happen. Note that it's a quick visual change on this site as it is loading the new pages quite rapidly.

      Can you let me know if you're seeing this brief fade to white, and whether this is different from what you were expecting? If you were anticipating a different outcome or if there’s a particular transition effect you're aiming for, let me know and I'll try to figure out how to achieve it.

      Thanks!

      Reply
  2. 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
  3. 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 *.