Animate a custom call-to-action banner - Webflow tutorial

A call-to-action banner is a great way to indicate an announcement at the top of your site and encourage your site visitors to do something. You can place banners anywhere and style them however you like, but this lesson walks through the structure and animation of a typical alert banner in Webflow (as inspired by Apple.com) - 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.
00:00 - Introduction
00:55 - Structure
03:35 - Interaction
06:45 - Recap
07:15 - How to watch Ted Lasso on Apple TV+
Read about it → university.webflow.com/lesson...
Clone the project → webflow.com/website/announcem...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@woodteknowledgee]

The way this is explained is clearer than a lot of other tutorials. I think it was the graphical explanation of the structure of the wrappers before they started designing.

[@HarshVerma.Growth]

Very Nice Presentation Dear...

[@taliadmytruk4634]

thanks for the tutorial! how to make it not appear the second time the user loads the page through cookies?

[@Webflow]

This forum post may help you with that: discourse.webflow.com/t/here-is-how-to-add-cookies-to-a-custom-modal/98956

[@77asare]

Apple paid for the commercial?

[@Webflow]

Nope. We just really like the banner.

[@mfax1000]

What happened to the other guy..

[@majulien]

It's McGuire Brannon. He is now the VP of Education at Webflow.

[@UnknownUser-re6yg]

The Man, The Myth, The legend

[@mfax1000]

@@majulien - that's great news! but after watching Grimur --- I don't miss McGuire much lol-screaming...