How to Combine Scroll Snapping & Motion Effects for Smooth Animations

May 21, 2020 | Everything Divi for WordPress




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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Mobile

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-1 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations How to Combine Scroll Snapping & Motion Effects for Smooth Animations

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-1 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Section Settings

Sizing

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

  • Min Height: 100vh

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-2 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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;

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-3 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Visibility

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

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-4 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Add Row #1

Column Structure

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-5 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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%

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-6 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Spacing

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

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-7 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Position

And we’ll reposition the row accordingly:

  • Position: Absolute
  • Location: Bottom Center

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-8 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-9 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Background Color

Then, change the background color.

  • Background Color: #ffee00

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-10 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Text Settings

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

  • Text Line Height: 1em

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-11 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Sizing

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

  • Width: 30%

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-12 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Spacing

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

  • Top Padding: 30%

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-13 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Add Row #2

Column Structure

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-14 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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%

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-15 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Spacing

Add some custom top margin across different screen sizes next.

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-16 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-17 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-18 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Sizing

We’ll force fullwidth on the module next.

  • Force Fullwidth: Yes

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-19 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-20 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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)

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-21 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-22 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-23 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Spacing

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

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-24 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-25 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-26 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

  • Button Font: Anton
  • Button Font Style: Uppercase

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-27 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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)

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-28 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-29 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-30 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-31 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-32 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-33 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-34 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Change Background Colors of Every Other Section

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

  • Background Color: #111111

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-35 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-36 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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>

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-37 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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; }

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-38 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Preview

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

Desktop

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations How to Combine Scroll Snapping & Motion Effects for Smooth Animations

Mobile

how-to-combine-scroll-snapping-motion-effects-for-smooth-animations-1 How to Combine Scroll Snapping & Motion Effects for Smooth Animations

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.


Source

WordPress Development

SEO NEWS

seo news

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.