The other day on the official “Divi Theme Users” Facebook group someone posted a link to a GSAP tutorial using Elementor (see the original tutorial), pondering whether it would be possible to do something similar with Divi. Elementor and Divi, although both page builders, are completely different when it comes to creating pages – Elementor uses containers a lot, whereas Divi uses sections and rows to build the page’s content.
I suspected it would be possible to convert the tutorial to using Divis so I thought I’d give it go as GSAP is a really interesting and visualling engaging way of animating website content. So here’s my final solution, recreating the scroll effect in the original tutorial.
Preview
Before I go into the detail of creating the GSAP scroll effect, here’s a preview of what the effect will look like once I’m done:
Creating the content
1. Create a new section & row
Start by creating a new section and adding a row with two columns to it.
2. Remove the section’s padding
Open the section’s settings, go to the Design tab and open the Spacing toggle. Set the top and bottom padding to 0px.
3. Customise the row settings
3.1 Make the row full width
Open the row settings, go to the Design tab and open the Sizing toggle. Set both the width and max-width to 100%. The row needs to be 100% width to ensure its background colour covers the entire section width. If it wasn’t, e.g left to its default 80%/1080px settings you would see a white “border” either side of the row.
3.2 Set the row’s background colour
Open the row settings, go to the Content tab and open the Background toggle. Set the background colour to #2e4d71.
3.3 Set the row’s padding
Open the row settings, go to the Design tab and open the Spacing toggle. Set the top and bottom padding to 0px. Set the left and right padding to 10rem to ensure the contents aren’t right up against the browser edge.
3.4 Add a CSS class to the row
Open the row settings, go to the Advanced tab and open the CSS ID & Classes toggle. Copy and paste or write gallery into the CSS Class input field.
4. Add a CSS class to the first column
Open the row settings and then select the settings for column 1.
Go to the Advanced tab and open the CSS ID & Classes toggle. Copy and paste or write left into the CSS Class input field.
5. Make the second column full height
Open the row settings and then select the settings for column 2.
Go to the Advanced tab and open the Custom CSS toggle. Copy and paste or write height: 100vh; into Main Element code field.
6. Make the second column sticky
Open the row settings and then select the settings for column 2.
Go to the Advanced tab and open the Scroll Effects toggle. Set Sticky Position to Stick to Top. Set Bottom Sticky Limit to Row.
7. Add a text module
Add a text module to the first column, add your content, and style the content how you want it to look. I’ve added some styles to the H2 heading and the body text so that they’ll be visible over the row’s background colour.
You need to add the CSS class reveal to the heading, so add class=”reveal” to the heading in the text module.
8. Make the text module full height
Open the text module settings, go to the Design tab and open the Sizing toggle. Set the height to 100vh.
9. Add a CSS class to the text module
Open the text module settings, go to the Advanced tab and open the CSS ID & Classes toggle. Copy and paste or write desktopContentSection into the CSS Class input field.
10. Vertically centre the text module
Open the text module settings, go to the Advanced tab and open the Custom CSS toggle. Copy and paste or write display: flex; and align-items: center; into the Main Element code field.
11. Duplicate the text module
Duplicate the text module as many times as needed. Here I duplicated it so that there were four idential text modules as that’s what the code from the original tutorial required.
12. Add an image module
Add an image module to the second column and add the first image to it.
13. Add a CSS class to the image module
Open the image module settings, go to the Advanced tab and open the CSS ID & Classes toggle. Copy and paste or write desktopPhoto into the CSS Class input field.
14. Set the image border radius
Open the image module settings, go to the Design tab and open the Border toggle. Set the border radius to 40px.
15. Set the image position
Open the image module settings, go to the Advanced tab and open the Position toggle. Set Position to Absolute. Set Location to the middle block.
16. Make the image sticky
Open the image module settings, go to the Advanced tab and open the Scroll Effects toggle. Set Sticky Position to Stick to Top. Set Bottom Sticky Limit to Section. Set Offset From Surrounding Sticky Elements to No.
17. Duplicate the image module
Duplicate the image module as many times as needed. Here I duplicated it so that there were four image modules as that’s what the code from the original tutorial required.
Change the images for the duplicated image modules so that they are all different, making sure all four images used are the same size.
18. Add the JavaScript
Add a new row and add a code module.
Copy and paste the following JavaScript into the code module.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script>
let mediaAnimation = gsap.matchMedia();
ScrollTrigger.defaults({
markers: false
});
const colors = ["#2E4D71", "#856546", "#05625C", "#5A483E", "#886648"];
mediaAnimation.add("(min-width: 666px)", () => {
// Desktop animations
const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)");
const photos = gsap.utils.toArray(".desktopPhoto:not(:first-child)");
gsap.set(photos, { clipPath: 'inset(100% 0% 0% 0%)', autoAlpha: 1 });
const allPhotos = gsap.utils.toArray(".desktopPhoto");
details.forEach((section, i) => {
let bgColor = colors[i + 1];
ScrollTrigger.create({
trigger: section,
start: "200 bottom",
end: "+=100%",
onToggle: self => {
if (self.isActive) {
gsap.to(".gallery", { backgroundColor: bgColor });
} else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
gsap.to(".gallery", { backgroundColor: "#2E4D71" });
}
}
});
});
details.forEach((detail, index) => {
let headline = detail.querySelector(".reveal");
let animation = gsap.timeline()
.to(photos[index], { clipPath: 'inset(0% 0% 0% 0%)', autoAlpha: 1, duration: 1.5 })
.set(allPhotos[index], { autoAlpha: 1, duration: 1.5 });
ScrollTrigger.create({
trigger: headline,
start: "top 120%",
end: "top 60%",
animation: animation,
scrub: true,
markers: false
});
});
});
mediaAnimation.add("(max-width: 665px)", () => {
// Mobile animations
const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)");
details.forEach((section, i) => {
let bgColor = colors[i + 1];
ScrollTrigger.create({
trigger: section,
start: "200 bottom",
end: "+=100%",
onToggle: self => {
if (self.isActive) {
gsap.to(".gallery", { backgroundColor: bgColor });
} else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
gsap.to(".gallery", { backgroundColor: "#2E4D71" });
}
}
});
});
});
</script>
And We’re Done
You should now have an impressive looking scroll effect.
One thing to note here is the fact that this will work on desktop screens without any problems, but not tablets or mobile screens. I aim to have a follow up tutorial showing how this can be adjusted for smaller screen sizes.
