Animate a custom banner

Use Div blocks, Text elements, and Interactions to create a custom call-to-action banner that animates on page load.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

A banner serves as a call-to-action and is a way to draw visitors’ attention to important announcements on your website. You can place banners anywhere and style them however you like, but this lesson walks through the structure and animation of a typical announcement banner — one that slides out from under the navbar on page load. We’ll also show you how to animate the banner so it changes color after the slide animation.

In this lesson, you’ll learn:

  1. How to create a banner
  2. How to add and style the banner text
  3. How to hide the banner before animation
  4. How to add interactions to animate the banner
  5. How to add interactions to change the banner colors

How to create a banner

The structure of the banner with three div blocks and a text element.

To build the structure of the banner:

  1. Drag a Div block from the Add panel onto the Webflow canvas
  2. Add a class to the Div block (e.g., “Banner wrapper”)
  3. Add another Div block inside the banner wrapper
  4. Add a class to the second Div block (e.g., “Banner”)
  5. Open Style panel > Backgrounds and click the swatch to set the banner’s background color

How to add and style the banner text

To add text to the banner:

  1. Add a third Div block inside the banner
  2. Add a class to the third Div block (e.g., “Text wrapper”)
  3. Open Style panel > Size and set a Max W (e.g., 980 pixels)
  4. Open Style panel > Spacing and set the margin on both sides to auto

Learn more about auto margin in our Spacing lesson.

In the Spacing section of the Style panel, the left and right margins are set to auto.

To add and style the banner text:

  1. Drag a Paragraph from the Add panel into the text wrapper
  2. Open Style panel > Typography
  3. Click the color swatch in color to change the color of the text
  4. Click center in align to justify the text
  5. Open Style panel > Spacing and change the bottom margin to 0
  6. Add padding on all 4 sides (e.g., 15 pixels)
Good to know: To simultaneously increase or decrease margin or padding on all 4 sides of an element, use Shift + mouse drag (on Mac) or Shift + mouse drag (on Windows). 
In the Spacing section of the Style panel, each side has 15 pixels of padding.
Note: You can add any element (e.g., Text link, Image, Button, etc.) into the banner.
The styled banner with text is shown in the Designer.

How to hide the banner before animation

To ensure the banner is hidden before the animation starts:

  1. Select the banner wrapper
  2. Open Style panel > Size
  3. Set Overflow to hidden

Learn more about Overflow: hidden.

In the Size section of the Style panel, Overflow is set to hidden.

How to add interactions to animate the banner

To create the initial state where the banner is out of view:

  1. Select the banner and open the Interactions panel
  2. Click the “plus” icon to the right of Page trigger and select Page load
  3. Click the Action dropdown menu in When page starts loading and choose Start an animation
  4. Click the “plus” icon to the right of Timed animations and name it (e.g., “Banner slide in”)
  5. Click the “plus” icon to the right of Actions and choose Transform > Move
  6. Set the Y axis to -100% in Move
  7. Check the Set as initial state checkbox in Timing
In the Page trigger section of the Interactions panel, the mouse is hovering over the Page load option.
In the When page starts loading section of the Interactions panel, the Action dropdown menu is open and the mouse is hovering over “Start an animation.”
In the Move section of the Interactions panel, the “Set as initial state” box is checked and the Y-axis is  set to -100%.

In the same Interactions panel animation, you can create the fully loaded state where the banner is in view:

  1. Click the “plus” icon to the right of Actions and choose Transform > Move
  2. Set the Y axis to 0% in Move

Learn more about Interactions in our Triggers and animations lesson.

To control your animation further, you can adjust its speed or delay its start after the page loads.

To change its speed:

  1. Open Timing > Easing
  2. Choose custom to adjust the easing curve

To delay the animation following page load:

  1. Open Timing > Start
  2. Set a delay (e.g., 0.2 seconds)

Learn more about easing in our Interpolation, easing, and smoothing lesson.

How to add interactions to change the banner colors

In the same Interactions panel animation, you can make the banner’s background change colors after it slides into view:

  1. Select the banner
  2. Click the “plus” icon to the right of Actions and choose Style > BG color
  3. Click the swatch and choose a color in Interactions > Background
  4. Set a delay (e.g., 2 seconds) in Timing > Start
In the Actions section of the Interactions panel, the “plus” icon to the left of the Banner BG Color animation is highlighted.

In the same Interactions panel animation, you can also change the text color at the same time the background color changes:

  1. Select the Paragraph
  2. Click the “plus” icon to the left of the BG color animation and choose Style > Text color
  3. Click the swatch and choose a new text color in Interactions > Typography

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top