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 Transition #2
Desktop
Mobile
Animated Page Transition #3
Desktop
Mobile
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’.
Use Template on All Pages
Use the new template on all pages (or the pages you want the transition to apply to).
Start Building Template Body
Then, start building the custom body of your page template.
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
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
Add New Row
Column Structure
Continue by adding a new row to the section using the following column structure:
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%
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
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.
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
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
Row Settings
Background Color
Open the row settings next and add the following background color:
- Background Color: #e2e2e2
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
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
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
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
Recreate Animated Page Transition #2
Section Settings
Background Color
Want to create the second animation instead? Open the section settings and use the following background color:
- Background Color: #d8cdbe
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
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%
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
Column Settings
Background Color
Then, open the row’s column settings and use a white background color.
- Background Color: #ffffff
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
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
Recreate Animated Page Transition #3
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%
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
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%
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
Column Settings
Background Color
Continue by opening the column settings. Change the background color.
- Background Color: #ffffff
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
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
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!
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 Transition #2
Desktop
Mobile
Animated Page Transition #3
Desktop
Mobile
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.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-animated-page-transitions-with-divis-theme-builder
