I was browsing Apple.com the other day trying to find out how to watch tv, but apparently pressing “Watch” takes you somewhere else.
It was then and only then that I saw the banner in its full beauty. Not only can I get 3% daily cash back with Apple card. Oh, no. I can pay for my new Apple Watch over 24 months interest free.
But the big thing that stood out to me is this banner. Unlike other banners, it was clean, elegant, and the animation was really smooth.
So. I want to talk through rebuilding a banner like this in the Webflow Designer. And the concepts we’re using here are exactly the same if you’re building this with custom code or you’re using a visual development platform like Webflow.
So we’ll break it down into three things: structure (basically the anatomy and styling of the banner), then the interaction and animation itself, and finally, we’ll figure out how I can watch TV on Apple.com.
Structure. There are lots of different ways to do this. We’re doing it with three less Div than Apple, and the structure’s going to look like this:
We’ll have our text, and it’ll be nestled inside a text wrapper. And then all of that is placed inside a banner, which is nestled inside of a banner wrapper.
Two questions: (1) why this layout? And (2), isn’t it “nested” and not “nestled”?
The magic comes from the fact that the text is constrained by the text wrapper (it keeps things narrow). And the banner itself is what houses all of this. But the banner wrapper is what serves as the secret window. And it clips off the banner as it animates in.
So. Let’s set it up. We’ll build this structure in reverse order: we’ll start with the parent-most element. Let’s add a Div (we’ll place this anywhere on the page, but I’ll put it under the navbar). And let’s create a class to keep this organized: I’ll call it banner wrapper. And that’s the start.
Inside the banner wrapper, of course, we’ll add another Div. Why? Because this one (and we’ll add a class again) this one is our banner. So let’s set the background color here. Keep in mind: we’re not adding any dimensions yet, and the reason we’re not doing that is because a lot of this is going to be sized by the text itself.
Okay. Inside the banner is our text wrapper. Oh look, another Div. This one is the text wrapper (so we’re almost there — we’ll just make sure to add a class with that name here). This one’s different, because like we said a moment ago, we’ll use it to keep things neatly contained towards the center. So let’s set a maximum with (Apple does 980, you can do whatever you want). And let’s set the margin on both sides to auto (this will keep things centered).
Okay. And finally, let’s add our text. Now, Apple uses a paragraph here. That’s probably our best bet, but you can really add anything — an image, a link, a button. And we can style the paragraph however we want here to get it looking just the way we want it to.
Now. One more thing before we move into interactions. This looks okay but paragraphs by default can come with some bottom margin. So we’ll go in and zero that out. And also, the text is pretty tight on the sides. Let’s select our text wrapper and add some padding to create some breathing room on all four sides (just holding down shift to adjust all four sides at once).
Also, since we’ll be creating an animation here, we want to make sure that the banner is hidden (on Apple, notice how the banner is not visible outside of this boundary before it animates in). So to make sure we have the same on our design, with the banner wrapper selected, let’s go over and make the overflow hidden. (This’ll clip content outside the boundary.)
And that, my friends, is it. Can we take it even further? Sure, I’ll just paste new text with slightly more competitive terms than Apple’s.
Okay. Interactions. This one’s pretty simple. We have an initial state (in which the banner is sort of tucked out of view), then we have a fully loaded state (so that after the page loads up, we can slide down the banner into view).
So let’s build it. Let’s make sure our banner is selected (not the wrapper), and let’s go in and add an interaction. We want this to be a page trigger (so when the page loads, we want some kind of animation to happen). And here’s where we can define that: we can have it start an animation, and this can be a new animation we build ourselves. We’ll call it “New animation we’ll build ourselves.” except, no, we won’t, that’s a terrible name. Let’s rename it to “Banner slide in.”
Okay. So to recap: two points. Starting point, ending point. Let’s click in to add a starting point. And we’ll be moving this, so let’s choose move. And just to demo, we’re moving this up and down the y-axis. But what we really want to do is make sure it goes 100% (this is the full height of the banner) — we want to make sure it’s 100% up, so we can’t see it through the banner wrapper. So we’ll set this to negative 100%.
And now. Where’d it go? It’s sitting right out of view.
And to make sure this is what it does by default (in fact, if I press the play button, when the page loads, it’s actually doing the opposite of what we want.) but to make sure this is the initial state (so it’s tucked up on page load, we’ll set this action as the initial state.
Okay. That’s the first part: the starting point. Second. We’ll add one more action. (This one’s also a move action.) and at this point, we want to zero it out (in other words, we want it back at the origin). What will that do? Let’s see.
And we can see, it goes from its starting point (its initial state) to the origin (where we want it to be).
Now. We can do some other things here. For instance, we can go in and change the easing (we can control the type of easing curve that dictates the rate at which the y-position will do whatever.) and let’s add a .2 second delay here, before our animation starts.
And the other thing we can do (if we really want to be like Apple), is we can change our colors after load. So let’s add two more points there:
First. Let’s change our background color. So we’ll add another action after it animates in. And that action will change the background color. We’ll change the color to gray (we can select any color here). And we actually don’t want this to happen instantly. So let’s go in and make sure this action starts in 2 seconds (we can just add that delay here).
And we can change the text color, too. For this, let’s select the paragraph. And once we do, we’ll sort of click in specifically to make sure we’re adding a concurrent action. And you’ll notice how it sort of groups (let’s select text color), and when we do it groups it so this animation will happen at the same time as the background color. And we’ll change this color to either black or maybe a dark gray.
And if we go into preview mode. What happens? Okay, I didn’t press the button. But when I do? Boom. Animates in. Colors change. Magic.
So. There’s a lot we can do with something like this. Let’s recap what we did to get here before going to step 3.
We added four elements: a banner wrapper, a banner inside of that, a text wrapper, and some text inside of that. We did a bunch of stuff to it using a secret language called css. And that let us get the layout positioned exactly how we wanted it.
Then we went and added an interaction. On page load, we’re following a custom animation and the animation follows our actions: move in from the initial position to the origin. And then change the colors of the background and the other thing that’s the opposite of the word “background.”
Finally, for step 3, i’m going to try and figure out how to watch Apple TV+ — particularly Ted Lasso, on Apple’s website.
Apple TV... How does this work? How does— is it Apple.com? Do I, or... No wait, I found it. Apple TV+. There we go. Okay. Stream now. Okay, stream now. Open TV. Welcome to TV. Start watching. Alright, Ted Lasso I'm coming for you. Wait. Okay. Start free trial. Apple ID. Okay. Password. I'm in.
[Ted Lasso playing in background]
[Grimur] It's gonna be good.