Animate a Footer SVG Divider

Hello animators! 👋🏻

Quite a popular trend these days is seeing section dividers animate on scroll. In this example, we will use a custom SVG to create a rounded section divider for the footer, and show you how we can make it go from a rounded shape to flat as we scroll. Let's get right into it!

Initial Setup

For this example, we will be using Bricks Builder, but the markup is essentially the same across all websites. We will start with a section, and inside that, we will have a code block (Divider) with our SVG, and then the container, like this:

As mentioned, the element called "Divider" is the code block; we will have a class added to this called .footer__top-divider so that we can target it with Motion.page, and the SVG code and styles for this code block are as follows:

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
   <path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>

.footer__top-divider{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.footer__top-divider svg{
    position: relative;
    display: block;
    width: 100%;
    height: 100px;
}

.footer__top-divider .shape-fill{
	fill: var(--bg-body); /* Use a color here to match your site background color */
}

To add a color to this, you will need to add a background color to the parent element (Footer). This will be added to both the footer itself and the SVG will act like a mask.

Now, we are ready for Motion.page! 🔥

Motion.page Setup

For this animation, we will use the ScrollTrigger. Let's go ahead and toggle on "Lock to scrollbar". In our example, we are using a short delay of 0.5s. We will start the animation when the First element's top reaches 80%, and ends when the first element's top reaches 70%. This will give a small space where the animation will take place towards the bottom of the page.

Now, let's navigate to the Animation section. Let's go ahead and add our selector. Remember, we gave our code block a class of ".footer__top divider", and we will need to target specifically the SVG element. So, our selector needs to be .footer__top-divider svg

Since the element already starts out as intended, we do not need to add anything in the From tab. Let's go to the To tab, and tweak the following:

  • Dimensions -> Height: 0px (please make sure the "px" unit is selected here and not "%").
  • Custom -> min-height: 0

The reason we add a min-height in custom is because sometimes the SVG does not become fully flat, so we explicitly make it 0 as a bare minimum here.

And there you have it! You should now have a nifty little divider which starts off rounded and straightens out as you scroll down.

100 %