How to Transform Your Design with Scroll Velocity Using Divi & GSAP

Last Updated on September 16, 2022 by Leave a Comment

How to Transform Your Design with Scroll Velocity Using Divi & GSAP
Blog / Divi Resources / How to Transform Your Design with Scroll Velocity Using Divi & GSAP

The more familiar you get with Divi, the more you come to realize that it’s a very flexible tool. It allows you to dive straight into a page design without having to go through other design applications first. It also sets the foundation for you to create even more advanced experiences with some of its built-in features, such as scroll effects and sticky options. Now, although these are pretty powerful features on their own, they have their limits. Limits you can easily break out of if you use external libraries. In today’s tutorial, for instance, we’ll show you how to transform your design with scroll velocity using Divi, GSAP and ScrollTrigger for GSAP. As we’re scrolling down the design, certain elements will transform depending on the speed you’re using to scroll, which leads to a highly-interactive experience. You’ll be able to download the JSON file 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.

Vertical Skew

Desktop

scroll velocity

Mobile

scroll velocity

Horizontal Skew

Desktop

scroll velocity

Mobile

scroll velocity

Rotate

Desktop

scroll velocity

Mobile

scroll velocity

Download The Layouts for FREE

To lay your hands on the free layouts, 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.

What We’re Using

1. Build Element Structure

Add New Section

Gradient Background

We’ll start this tutorial by building the element structure on a new or existing page. Add a new section, open the section settings and include a gradient background.

  • Color 1: #162c2d
  • Color 2: #122223
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Position: 20%
  • End Position: 20%

scroll velocity

Spacing

Move on to the section’s design tab and modify the padding values next.

  • Top Padding: 100px
  • Bottom Padding: 100px

scroll velocity

Overflows

To make sure nothing exceeds the section container, we’ll hide the section’s overflows too.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

scroll velocity

Add New Row

Column Structure

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

scroll velocity

Sizing

Without adding modules yet, open the row settings and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 90%
  • Max Width: 1580px

scroll velocity

Main Element

We’re vertically aligning our row content by adding the following lines of CSS code to the row’s main element in the advanced tab:

Desktop:

display: flex;
justify-content: center;
align-items: center;

Tablet & Phone:

display: block;

scroll velocity

Column 1 Settings

Main Element

Then, we’ll open the column 1 settings and modify the column’s width across different screen sizes in the advanced tab.

Desktop:

width: 45% !important;

Tablet & Phone:

width: 100% !important;

scroll velocity

scroll velocity

Column 2 Settings

Background Color

We’ll, then, open the column 2 settings and use a background color.

  • Background Color: #193738

scroll velocity

scroll velocity

Spacing

Next, we’ll change the column’s spacing values.

  • Top Padding:
    • Desktop: 200px
    • Tablet: 100px
    • Phone: 50px
  • Bottom Padding:
    • Desktop: 200px
    • Tablet: 100px
    • Phone: 50px
  • Left Padding: 5%
  • Right Padding: 5%

scroll velocity

Main Element

And we’ll complete the column settings by adding the following lines of CSS code to the column’s main element:

Desktop:

width: 55% !important;

Tablet & Phone:

width: 100% !important;

scroll velocity

Add Image Module to Column 1

Leave Image Box Empty

Time to start adding modules, starting with an Image Module in column 1. Leave the image box empty.

scroll velocity

Background Image

Instead, we’re using a background image for this module.

scroll velocity

Sizing

We’ll modify the sizing settings in the design tab.

  • Width:
    • Desktop: 100%
    • Tablet & Phone: 90%
  • Module Alignment: Center

scroll velocity

Spacing

Then, we’ll apply the following values to the spacing settings:

  • Top Margin:
    • Desktop: 100px
    • Tablet & Phone: 0px
  • Bottom Margin:
    • Desktop: 100px
    • Tablet & Phone: 0px
  • Top Padding:
    • Desktop: 250px
    • Tablet: 200px
    • Phone: 150px
  • Bottom Padding:
    • Desktop: 250px
    • Tablet: 200px
    • Phone: 150px

scroll velocity

Add Text Module #1 to Column 2

Add H3 Content

On to column 2. There, the first module we need is a Text Module with some H3 content.

scroll velocity

H3 Text Settings

Move on to the module’s design tab and change the H3 text settings accordingly:

  • Heading 3 Font: Karla
  • Heading 3 Text Color: #e0ca9a
  • Heading 3 Text Size:
    • Desktop: 44px
    • Tablet: 30px
    • Phone: 26px

scroll velocity

Add Text Module #2 to Column 2

Add Description Content

Add another Text Module right below the previous one and insert some description content of your choice.

scroll velocity

Text Settings

Change the module’s text settings accordingly:

  • Text Font: Alata
  • Text Color: rgba(255,255,255,0.67)
  • Text Size:
    • Desktop: 17px
    • Tablet: 15px
    • Phone: 14px
  • Text Line Height: 2.2em

scroll velocity

Spacing

And add some top margin to the spacing settings.

  • Top Margin: 5%

scroll velocity

Add Button Module to Column 2

Add Copy

The next and last module we’ll add to this column is a Button Module. Use some copy of your choice.

scroll velocity

Button Settings

Move on to the module’s design tab and change the button settings as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Size:
    • Desktop: 20px
    • Tablet & Phone: 18px
  • Button Text Color: #ffffff
  • Button Border Width: 0px

scroll velocity

  • Button Font: Karla
  • Show Button Icon: Yes
  • Button Icon Placement: Left
  • Only Show Icon On Hover for Button: No

scroll velocity

Spacing

Add custom values to the spacing settings next.

  • Top Margin: 5%
  • Top Padding: 20px
  • Bottom Padding: 20px

scroll velocity

Clone Row Twice

Once you’ve completed the row and all modules, you can clone the row up to as many times as you want.

scroll velocity

Change Images & Content

Make sure you change the duplicate content in each one of the duplicate rows.

scroll velocity

2. Add Scroll Velocity Effect

Add CSS Class to Elements You Want to Skew

Column 2

Now that we have the element structure in place, we can focus on getting the effect to work. To do that, open the column 2 settings of each row individually and assign a CSS class.

  • CSS Class: velocity-transform

scroll velocity

scroll velocity

Image Module in Column 1

We’re adding that same CSS class to each Image Module in our design.

  • CSS Class: velocity-transform

scroll velocity

Add New Row

Column Structure

Next, we’ll add a new row to the bottom of the section using the following column structure:

scroll velocity

Spacing

Open the row settings and remove all default top and bottom padding in the spacing settings.

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

scroll velocity

Add Code Module to Column

Then, add a Code Module to this new row.

scroll velocity

Add GSAP & ScrollTrigger Libraries

Before adding any code, we’ll include the GSAP and ScrollTrigger libraries between script tags.

  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

scroll velocity

Add Script Tags

We’ll add new script tags right below these libraries.

scroll velocity

Add Custom Code Between Script Tags (Vertical Skew)

And include the following lines of JavaScript code to create vertical skew:

let proxy = { skew: 0 },
    skewSetter = gsap.quickSetter(".velocity-transform", "skewY", "deg"), 
    clamp = gsap.utils.clamp(-10, 10);

ScrollTrigger.create({
  onUpdate: (self) => {
    let skew = clamp(self.getVelocity() / -400);
    if (Math.abs(skew) > Math.abs(proxy.skew)) {
      proxy.skew = skew;
      gsap.to(proxy, {skew: 0, duration: 0.8, ease: "power0", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});
    }
  }
});

gsap.set(".velocity-transform", {force3D: true});

scroll velocity

Use Horizontal Skew or Rotate Instead

If you want to use horizontal skew or rotate instead, as seen in the preview of this post, you can simply replace the “SkewY” in the code with “SkewX” for horizontal skew or “rotate” for rotate! That’s it.

scroll velocity

scroll velocity

Preview

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

Vertical Skew

Desktop

scroll velocity

Mobile

scroll velocity

Horizontal Skew

Desktop

scroll velocity

Mobile

scroll velocity

Rotate

Desktop

scroll velocity

Mobile

scroll velocity

Final Thoughts

In this post, we’ve shown you how to create an interactive design on scroll. More specifically, we’ve shown you how to transform your design depending on the scroll velocity. We’ve combined the best of Divi with two external JavaScript libraries, namely GSAP and ScrollTrigger for GSAP. You were able to download the JSON file 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 Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Estheticians (Quick Install)

New Starter Site for Estheticians (Quick Install)

Posted on November 12, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 3

Divi 5 Update: Public Alpha Version 3

Posted on November 11, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 3 today. Thanks...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today