Create Scroll Down Icons With Looping Animations In Divi

2021-08-23 | Divi, Tutorials | 0 comments

Learn how to create and style scroll down icons and add subtle animation loops to make them pop. We'll use Divi animation effects and a little custom CSS.
Skribent: Victor Duse
By Victor Duse

Adding a scroll down icon in your hero area indicates that there are more content below. In this tutorial, we’ll add a smooth looping animation to the scroll down icon using the Divi animation effects and a CSS snippet. I’ll show you one basic scroll arrow and one fancy custom icon. Last but not least, we’ll add a swipe down icon for mobile visitors. Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build. I’ll use a slightly modified version of the free Divi layout pack “Divi Crib” from DiviMundo in this tutorial.

1. Basic scroll down icon

Here we’ll use one of the default Divi blurb icons with a loop animation.

2. Fancy scroll down icon

Here we’ll use a custom scroll down icon with an animation loop.

3. Mobile swipe down icon

Here we’ll use a custom swipe down icon and use the Divi Responsive Content feature to display it for mobile and tablet users only.

Download the layouts + icons in PNG & SVG (vector)

  1. Enter your e-mail address below to subscribe to our newsletter.
  2. Download the zip file containing the layouts and the icons.
  3. Extract the zip file on your hard drive.
  4. Import the JSON files to your Divi Library or use the icons in your own designs.
The newsletter contains tips, guides and offers and is sent out approximately once a month. You can unsubscribe at any time. We will never sell or share your email address. Your email address is stored at Mailchimp.

Step by step tutorial

First, we need to give the section (or row) below the hero area a unique CSS ID, for example scroll.

After that, we can add the link URL (anchor link) #scroll to the icon. This way, the visitor will be scrolled down when clicking or tapping the icon.

Please note that we will use a “Regular section” and not a “Fullwidth section” for the hero area.

Scroll down CSS ID

1. Create a basic scroll down arrow animation

Start by adding a new single column row in the bottom of your hero area and insert a Blurb module. In the Blurb settings, go to Text and remove all text in the Title and Body fields.

In the Image & Icon section, choose Yes under Use Icon and choose the icon that you want to use.

In the Link section, add #scroll (or the CSS ID that you’ve added to the section below) in the Module Link URL field.

Choose scroll down icon
Add your anchor link

Head over to the Design tab and go to the Image & Icon section. Choose your Icon Color. I’ll go for white (#fff). Toggle Use Icon Font Size to Yes and choose your icon size. I’ll use 48 px in this example.

Head down to the Animation section and choose Slide under Animation Style. This will trigger a list of additional animation settings. Set Animation Direction to Down and Animation Duration to 700 ms.

Create a subtle and smooth animation by decreasing Animation Intensity to 10% and choose Ease-In under Animation Speed Curve. Set Animation Repeat to Loop and choose No Animation in the Image/Icon Animation dropdown in the bottom.

Create a looping animation

Close but no cigar?

The looping effect does not display in the Divi Visual Builder so you need to save and exit the Divi Visual Builder to preview the result in frontend. Close but no cigar, right? The animation loop is stuttering and far from smooth. I’ve also noticed that animation opacity sometimes changes when scrolling up and down on the page.

Let’s add the final touch!

Let’s fix that by adding a CSS snippet in the Advanced tab under Custom CSS » Main Element in the Blurb module.

/* Smooth loop effect */
animation-direction: alternate;

/* Force full opacity always */
opacity: 1 !important;
Blurb custom CSS snippet
7

That’s it! Save and exit the Divi Visual Builder to preview your animated scroll down icon in frontend. 

2. Create a fancy animated scroll down icon

It’s pretty straight forward if you want to use a custom icon as a scroll down icon with a looping animation. If you already created the arrow in the chapter above, you can just go to your Blurb Content settings and set No in the Use Icon toggle. After that, click Add image and upload the image that you want to use.

Add a custom scroll down icon image
Mouse icon

If you start from scratch, you could of course use an Image module instead and just add the same the anchor link (#scroll) and the animation settings + the custom CSS from above.

Changing the icon color

But what if your hero area has a light background color? You could of course edit the image color in Photoshop but there’s no need for expensive third-party software when we have Divi.

Just go to the Design tab in the Blurb (or Image) module settings and click Filters. Now, reduce the Brightness to make the icon darker. 0% will give you a black mouse icon.

Divi Color Filters
Mouse icon

3. Add a Swipe Down Icon for Mobile Users

The mouse icon doesn’t make sense on mobile devices so let’s change it to a swiping finger icon for smartphone and tablet users. We’ll use the nifty Divi responsive content feature.

In the Content tab, go to Image and hover just above the image box. Now a new set of tools should appear. Click the smartphone icon to activate the responsive content feature.

Click the Tablet in the middle and upload the image that you want to display on mobile devices. The tablet image will be inherited to the smartphone view if you don’t make any additional settings. Save, and test it out. (The demo below will display the mobile swipe icon also in desktop devices, just to… yeah, you get it.)

Divi Responsive Content
Mouse icon

That’s all!

Let me know what you think in the comments below and don’t forget to subscribe on YouTube for more tutorials.

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.