How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Posted on May 21, 2020 by in Divi Resources | 5 comments

How to Combine Scroll Snapping & Motion Effects for Smooth Animations

If you’re looking for a way to create smooth animations with Divi’s built-in scroll effects, you’re going to love this post. We’ll show you how to combine scroll snapping with Divi’s built-in motion effects to create full height sections that you can scroll between in one go. We’ll start by creating the first section. We will, then, reuse that section throughout our page design. To enable the scroll snapping, we’ll use CSS scroll snap properties which we’ll assign to our page’s sections, HTML, header and footer. You’ll be able to download the page’s 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.

Desktop

scroll snapping

Mobile

scroll snapping

Download The Smooth Animations Layout for FREE

To lay your hands on the free smooth animations layout you will first need to download it 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. Create New Page & Start Designing First Section

Add New Page & Switch Over to Visual Builder

Start by adding a new page. Enter the page’s title, publish the page and switch over to Visual Builder.

scroll snapping

scroll snapping

Section Settings

Sizing

Once inside the new page, open the section that’s already there and change the sizing settings.

  • Min Height: 100vh

scroll snapping

Main Element

We’re adding two lines of CSS code to the section as well. These lines of CSS code will help us turn the section into a snapping point for the scroll snapping.

scroll-snap-align: start;
scroll-snap-stop: normal;

scroll snapping

Visibility

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

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

scroll snapping

Add Row #1

Column Structure

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

scroll snapping

Sizing

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

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

scroll snapping

Spacing

We’re removing the section’s default top and bottom padding as well.

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

scroll snapping

Position

And we’ll reposition the row accordingly:

  • Position: Absolute
  • Location: Bottom Center

scroll snapping

Add Text Module to Column

Leave Content Box Empty

The only module we need in this row is a Text Module. Make sure you leave the module’s content box empty.

scroll snapping

Background Color

Then, change the background color.

  • Background Color: #ffee00

scroll snapping

Text Settings

We’ll remove the module’s text line height too.

  • Text Line Height: 1em

scroll snapping

Sizing

Then, we’ll go to the sizing settings and change the width.

  • Width: 30%

scroll snapping

Spacing

We’ll turn the module into a square by adding some top padding as well.

  • Top Padding: 30%

scroll snapping

Add Row #2

Column Structure

On to the next row. Use the following column structure:

scroll snapping

Sizing

Without adding any modules yet, open the row settings and change the sizing settings in the design tab:

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

scroll snapping

Spacing

Add some custom top margin across different screen sizes next.

  • Top Margin: 20vh (Desktop), 5vw (Tablet & Phone)

scroll snapping

Column 2 Spacing

Then, we’ll open the column 2 settings and add some custom padding values.

  • Top Padding: 2vh (Tablet & Phone)
  • Left Padding: 2vw
  • Right Padding: 2vw

scroll snapping

Add Image Module to Column 1

Upload Image

Time to add modules, add an Image Module to column 1 and upload an image of your choice.

scroll snapping

Sizing

We’ll force fullwidth on the module next.

  • Force Fullwidth: Yes

scroll snapping

Add Text Module #1 to Column 2

Add H2 Content

In the second column, the first module we need is a Text Module with some H2 content.

scroll snapping

H2 Text Settings

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

  • Heading 2 Font: Anton
  • Heading 2 Text Size: 5vw (Desktop), 7vw (Tablet), 9vw (Phone)

scroll snapping

Add Text Module #2 to Column 2

Add Content

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

scroll snapping

Text Settings

Change the module’s text settings as follows:

  • Text Font: Open Sans
  • Text Size: 0.8vw (Desktop), 2vw (Tablet), 2.5vw (Phone)
  • Text Line Height: 1.8em

scroll snapping

Spacing

And add some custom top and bottom margin to the spacing settings.

  • Top Margin: 2vw
  • Bottom Margin: 2vw

scroll snapping

Add Button Module to Column 2

Add Copy

The next and last module we need in this column is a Button Module. Add some copy of your choice.

scroll snapping

Button Settings

Style the button accordingly:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Button Text Color: #333333
  • Buton Border Color: #333333
  • Button Border Radius: 1px

scroll snapping

  • Button Font: Anton
  • Button Font Style: Uppercase

scroll snapping

Spacing

And complete the module settings by adding some custom padding values across different screen sizes.

  • Top Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Bottom Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Left Padding: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)
  • Right Padding: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)

scroll snapping

2. Add Scroll Effects to Different Elements

Text Module in Row #1

Vertical Motion

Once all elements are in place, it’s time to add the scroll effects. Open the Text Module in your first row and use some vertical motion.

  • Enable Vertical Motion: Yes
  • Starting Offset: 4
  • Mid Offset: 0
  • Ending Offset: -4
  • Motion Effect Trigger: Middle of Element

scroll snapping

Row #2

Column 1

Horizontal Motion

Then, open the first column of your second row and add some horizontal motion.

  • Enable Horizontal Motion: Yes
  • Starting Offset: -3
  • Mid Offset: 0 (from 40% to 60%)
  • Ending Offset: -3
  • Motion Effect Trigger: Middle of Element

scroll snapping

Fading In and Out

We’re applying a fading in and out effect to that same column too.

  • Enable Fading In and Out: Yes
  • Starting Opacity: 0%
  • Mid Opacity: 100%
  • Ending Opacity: 100%
  • Motion Effect Trigger: Middle of Element

scroll snapping

Column 2

Horizontal Motion

Then, we’ll open the second column’s settings and apply the following horizontal motion settings:

  • Enable Horizontal Motion: Yes
  • Starting Offset: 3
  • Mid Offset: 0 (from 40% to 60%)
  • Ending Offset: 3
  • Motion Effect Trigger: Middle of Element

scroll snapping

Fading In and Out

Along with a fading in and out effect.

  • Enable Fading In and Out: Yes
  • Starting Opacity: 0%
  • Mid Opacity: 100%
  • Ending Opacity: 100%
  • Motion Effect Trigger: Middle of Element

scroll snapping

4. Reuse First Section

Clone Section Four Times

Once you’ve completed the first section and its scroll effects, you can clone it up to as many times as you want.

scroll snapping

Change Background Colors of Every Other Section

We’ll change the background color of every other section.

  • Background Color: #111111

scroll snapping

5. Add CSS Code to Enable Scroll Snapping on Page’s HTML

Add Code Module to Last Section on Page

Now, to enable the scroll snapping on our page’s HTML, we’ll add a Code Module anywhere to the last section on our page.

scroll snapping

Insert HTML CSS Code

These lines of CSS code will help us apply the scroll snapping to our page’s HTML:

<style>

html {
overflow-x: hidden;
scroll-snap-type: y mandatory;
scroll-snap-points-y: repeat(100vh);
}

</style>

scroll snapping

Add Scroll Snapping Start to Header & Footer

We’ll make sure our header and footer are scroll snapping points as well (just as our sections are) by adding the following lines of CSS code too:

header, footer {
scroll-snap-align: start;
}

scroll snapping

Preview

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

Desktop

scroll snapping

Mobile

scroll snapping

Final Thoughts

In this post, we’ve shown you how to create smooth animations by combining scroll snapping with Divi’s built-in motion effects. This is a great way to enable scroll effects with one single scroll. Scroll snapping helps visitors effortlessly scroll through different parts of your website. We’ve combined this with a full height section design. 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.

Premade Layouts

Check Out These Related Posts

5 Comments

  1. Hello Donjete,

    Thanks for providing such a great informative article.. I was searching about how to give animated effects to my WordPress website and suddenly land on your blog.. i have got the solution now.. thanks for helping us..

    Regards,
    Ovais Mirza

  2. Hi. I love this! But…am having an issue.

    I cannot get the scroll snap to snap to the 2 middle sections. It just wants to skip them and only allows for the top and bottom one to be seen! Please let me know if there is a fix for this!

    • I am also having the same issue.

      Has anyone resolved this?

    • Same here, too bad…

  3. Scroll snapping! Perfect animation timing. Thanks, ET.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest