How to Create Animated Page Transitions with Divi’s Theme Builder

Last Updated on September 16, 2022 by 17 Comments

How to Create Animated Page Transitions with Divi’s Theme Builder
Blog / Divi Resources / How to Create Animated Page Transitions with Divi’s Theme Builder

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

animated page transitions

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 newsletter 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

animated page transitions

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

animated page transitions

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.

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time πŸ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Download a Free Bistro Theme Builder Pack for Divi

Download a Free Bistro Theme Builder Pack for Divi

Posted on March 15, 2024 in Divi Resources

Divi Theme Builder Pack

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post
Get a Free Art Therapist Layout Pack for Divi

Get a Free Art Therapist Layout Pack for Divi

Posted on March 11, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Art Therapist Layout Pack that’ll help you get your next Art Therapist...

View Full Post
Download a Free Law Firm Theme Builder Pack for Divi

Download a Free Law Firm Theme Builder Pack for Divi

Posted on March 8, 2024 in Divi Resources

Divi Theme Builder Pack

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post

17 Comments

  1. This is the worst tutorial. Too much detail about formatting. I did not learn how to do page transitions. I gave up reading minutia I know already. Highly off topic for users who know Divi.

  2. It doesn’t work for me! Can anyone help please? I add New Template then Divi takes me Crete new page? Please let me know why this issue accur.

  3. Creative as always. Thanks for the inspiration.

  4. Very nice. It works for me in Safari and Firefox. What would be really cool is if Divi could be made to load page asynchronously with these transitions in between. I can just see Nick and the rest of the devs pulling their hair at this request. πŸ€ͺ

    • +1 for load page asynchronously feature. Will improve page loading.

  5. These Animated Page Transitions are animated on the Chrome browser only.

    • For me Animated Page Transition is working also in Firefox.

  6. Excellent usage of the builder!!!

  7. This is a highly creative way of using the theme builder!
    Thanks!

  8. Hi Donjete
    Thanks for that. It’s very nice. However it made me think that something simpler should just be added to page settings to add a simple slide transition between pages out of the box. πŸ™‚

  9. I’ve not put time aside to learn Divi Theme Builder yet but love going over these tutorials and getting excited at it’s potential and eventually using it in my business.

  10. That’s a nice post, thanks a lot!
    If only Divi could have a Ajax page loading with seemless transition!

  11. This is great thanks for continuing to innovate Divi! Does this slow down the website loading time at all?

    • +1

  12. Very nice! Thanks Donjete!

    • Useful page transition Donjete! It’s working well on my page.

  13. Thank you for creating this tutorial!

    The idea shows promise, but it would seem a bit more fully transition-like if the colored boxes actually overlapped the page content while appearing and retreating, rather than the page suddenly turning blank and then the boxes sliding in and out.

    Or even if the page faded out first (as opposed to just suddenly disappearing), then the colored box arrives and departs, followed by the fading in of the new page.

    All that being said, this is still pretty cool as is!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today