Normally, when visitors navigate from page to page on your Divi website, the transition happens instantly.  Now, what if there’s a way to animate these page transitions? With Divi’s Theme Builder there sure is, without the need for any custom code! As soon as your visitors leave a page to enter another one, you can make an animation apply. In today’s tutorial, we’ll show you how to create these animated page transitions. More so, we’ll also share three different examples that you can apply on your next project right away. You’ll be able to download the template JSON files for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Animated Page Transition #1

Desktop

Mobile

animated page transitions

Animated Page Transition #2

Desktop

animated page transitions

Mobile

animated page transitions

Animated Page Transition #3

Desktop

animated page transitions

Mobile

animated page transitions

Download The Page Templates for FREE

To lay your hands on the free page templates, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

1. Go to Divi Theme Builder & Add New Page Template

Go to Divi Theme Builder & Add New Template

The first thing you’ll need to do is go to your Divi Theme Builder and click on ‘Add New Template’.

animated page transitions

Use Template on All Pages

Use the new template on all pages (or the pages you want the transition to apply to).

  • Use On: All Pages

animated page transitions

Start Building Template Body

Then, start building the custom body of your page template.

animated page transitions

2. Create Page Body Using Post Content Module

Section Settings

Spacing

Once inside the template editor, you’ll notice a section. Open that section and remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

animated page transitions

Visibility

To make sure no horizontal scrollbar appears when the animation is happening, we’ll need to hide both section overflows in the advanced tab of the section settings.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

animated page transitions

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

animated page transitions

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire width of the section container.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

animated page transitions

Spacing

We’re also removing the row’s default top and bottom padding. At this point, the section, row and column containers have the exact same size. There’s no whitespace between the containers whatsoever. This is important for what’s to come in the next step; adding the dynamic page content.

  • Top Padding: 0px
  • Bottom Padding: 0px

animated page transitions

Add Post Content Module to Column

The only module we need to make the page content appear dynamically is the Post Content Module. Go ahead and add this module to your row’s column. Thanks to the section and row settings we applied in the previous parts of this post, the dynamic page content will take up the entire width and height of the section container.

animated page transitions

3. Apply Animated Page Transition of Your Choice

Recreate Animated Page Transition #1

Section Settings

Background Color

Time to apply the animated page transitions! We’re sharing three different examples, but with Divi’s built-in options, the animation possibilities are endless. To apply the first animated page transition, open the section container and add a background color.

  • Background Color: #d8cdbe

animated page transitions

Animation

We’re also applying the following animation settings to the section:

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Row Settings

Background Color

Open the row settings next and add the following background color:

  • Background Color: #e2e2e2

animated page transitions

Animation

Continue by applying the following animation to the row:

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Delay: 500ms
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Column Settings

Background Color

On to the next container which we’ll animate, which is the column container. Open the column settings and add a white background color.

  • Background Color: #ffffff

animated page transitions

Animation

Add a custom animation to the column as well.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Delay: 1200ms
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Post Content Module Settings

Animation

Last but not least, we’ll animate the Post Content Module (containing all dynamic page content).

  • Animation Style: Fade
  • Animation Delay: 2500ms
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Recreate Animated Page Transition #2

animated page transitions

Section Settings

Background Color

Want to create the second animation instead? Open the section settings and use the following background color:

  • Background Color: #d8cdbe

animated page transitions

Animation

Then, apply a custom animation to the section.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Row Settings

Gradient Background

Open the row settings next and use the following gradient background for it:

  • Color 1: rgba(255,255,255,0)
  • Color 2: #ffffff
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Position: 50%
  • End Position: 50%

animated page transitions

Animation

Add a custom animation to your row too.

  • Animation Style: Slide
  • Animation Direction: Up
  • Animation Delay: 800ms
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In
  • Animation Repeat: Once

animated page transitions

Column Settings

Background Color

Then, open the row’s column settings and use a white background color.

  • Background Color: #ffffff

animated page transitions

Animation

Continue by adding an animation to the column.

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Delay: 2000ms
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Post Content Module Settings

Animation

Last but not least, open the Post Content Module settings and use the following animation settings:

  • Animation Style: Fade
  • Animation Delay: 3000ms
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Recreate Animated Page Transition #3

animated page transitions

Section Settings

Gradient Background

On to the next and last animated page transition! Open the section settings and use the following gradient background:

  • Color 1: #d8cdbe
  • Color 2: #ffffff
  • Gradient Type: Radial
  • Radial Direction: Top
  • Start Position: 20%
  • End Position: 20%

animated page transitions

Animation

Move on to the section’s design tab and change the animation settings accordingly:

  • Animation Style: Slide
  • Animation Direction: Down
  • Animation Intensity: 10%
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Row Settings

Gradient Background

Then, open the row settings and apply a gradient background:

  • Color 1: #ffffff
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 50%
  • End Position: 50%

animated page transitions

Animation

Modify the row’s animation settings too.

  • Animation Style: Slide
  • Animation Direction: Down
  • Animation Delay: 1000ms
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In
  • Animation Repeat: Once

animated page transitions

Column Settings

Background Color

Continue by opening the column settings. Change the background color.

  • Background Color: #ffffff

animated page transitions

Animation

Apply the following animation settings to the column too:

  • Animation Style: Slide
  • Animation Direction: Down
  • Animation Delay: 1500ms
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

Post Content Module Settings

Animation

And complete the third animated page transition by applying the following animation settings to the Post Content Module:

  • Animation Style: Fade
  • Animation Delay: 3000ms
  • Animation Speed Curve: Ease-In-Out
  • Animation Repeat: Once

animated page transitions

6. Save All Theme Builder Changes & Preview Result

Once you’ve built your page template’s body and added the animated page transition of your choice, you can save all Theme Builder changes and view the outcome on your website!

animated page transitions

animated page transitions

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Animated Page Transition #1

Desktop

Mobile

animated page transitions

Animated Page Transition #2

Desktop

animated page transitions

Mobile

animated page transitions

Animated Page Transition #3

Desktop

animated page transitions

Mobile

animated page transitions

Final Thoughts

In this post, we’ve shown you how to create animated page transitions with Divi’s built-in options and Theme Builder only. This is a great way to add another level of interaction to your website, without the need for additional code. You were able to download the example template JSON files for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

The post How to Create Animated Page Transitions with Divi’s Theme Builder appeared first on Elegant Themes Blog.