Interactions and finishing up
Summary
In this episode, we will add interactions and animations to liven up our website. We will build hover effects, page scroll effects, and click effects. We will also go over our audit panel, to ensure accessibility compliance and an overview of basic SEO.
Watch Here
Listen Here
Weekly tips
Set your Trigger then your animation
Learn the 4 key Animation types
Preset animation vs custom animation
Animations should last between .2 and .5 seconds
Run a final site audit before publishing
Webflow auto scales your images for mobile
Transcript
Joseph: All right. We have made it almost to the end.
Joel: Awesome.
Joseph: So I have the controls again, it is a little complicated to explain interactions and animations. So I figured I would just. Keep the controls. But this way you can get a glimpse into the world of animations interactions and then on your next project, you can do some dabbling yourself. So
Joel: that'll be fun.
Joseph: Let's jump right into it. Okay. So for interactions, there are two basic principles. There is the, if this, then that. I'll explain what I mean by that. So if we go over to our little lightning bolt you'll first, see two sets of triggers, there's an element trigger or a page trigger. So the element trigger applies to when you have an element selected.
So we'll start with that. So I'll describe a random item at the moment. We'll start with our image. Okay. What I could do is I could add an element trigger. Does that mean something will happen when I trigger this element? So I'm gonna click the little plus icon here. And so these are the options. These are the, if this, and then everything else will be the than that.
So here are the, I think there's only five available to us currently. So there's the mouse click. So if I click on this item, then something will happen. The next one is, if I hover over this, then we can have something. If the mouse move moves over the element, then something had happened. So like locationally X, Y axis.
Then the next one is if this item scrolls into view is that if something happens and the last one is while scrolling in view. So the web or scrolling interview means is when it scrolled into view. Whatever we set up will happen. And while scrolling in you means this thing will happen consistently or consecutively throughout the scroll of the item.
Sorry, let's start with scroll into view. So when this element scrolls into view, we can now set up our interaction or animation. So we have now selected, we have the image. And then we click the element trigger, and then we clicked scrolling to view, and now it gives us two options. So number one, we can do when scrolled interview.
So let's say you load the page, it scrolls into view. Something happened if you want it to undo what you did so that every time you scrolled back up and down, it re does whatever we set up. You would then set up a when scrolled out of you. So for this video, we'll do both. You probably would only need the first one on this specific element.
All right. So to set up our action, we will now quick action set up an action. Now Webflow has several standard interactions that they've already set up. So you can either grab one of these so we could fade it in. We could slide it up, it could grow, it could shrink. It could do some of those. For this rear XQ to make a little more customized.
So on the very top, it says custom animation starting age. So we're going to click that during the animation. Okay. So when scrolled into view, we now have two.
All right. We now have to pick an offset. So by how much does this item scroll into the, so we're weird because this section doesn't take up the full width. So right. When you load up this website, this item is already in view. So we do have an interesting option where you probably want to normally set an offset, but we're not gonna be able to because it's already into, so we're going to now add a timed.
W, so we're going to call it newspaper into view. We named it. It's. Now we're going to add an action to it. So we're going to, what we're going to do is we're going to try to accomplish it is when it's scrolled interview, it'll move up and become opaque. So start now, this is going to get a little complicated, so I'm just going to start walls and we're probably gonna have to backtrack.
All right. So first thing we are going to alright, so trying to backtrack, do you understand how we got to where we're at?
Joel: Yes, I believe so.
Joseph: Okay. So when you start a custom animation, you can pretty much do anything you want to. So you start to create this essential, essentially a timeline of what you want it to do.
So we want it to move up and then become visible. So we're going to set in to things. So we're in quick move, and then we're also going to add in opacity. So these right here start at the very beginning. All right. So we want the opacity to start at zero. So we're in a click, this little button down here that says set as initial state.
That means the item we'll initially do whatever we want. So initially the opacity will be at zero. All right. And then the image we're going to say start as initial state. So we're actually going to start it down. So we're actually going to move it away initially. So we are going to move it. Down a hundred air, low call it 200 pixels.
All right. So initially the image is now 200 pixels down and it's not there. So now we have to undo that. So we are now going to add a move and we're going to add capacity. So we are going to say that.
All right. So the move, we actually start the opacity. So when it comes into view, it will be a hundred percent opacity. So we are going to say that we'll take, so this is how long this spread your, this little setting will be. How long is this going to take? All right, so we're gonna say, all right, I'll take half setting or half a second.
We'll put it in as ease in, and then we'll say Oh, sorry. I have to actually put that at a hundred percent capacity and the image will come back to zero. So it'll come back to its starting point and those things are going to happen at the same time. So I'm gonna drag them together and those will happen now at second zero.
And that's what will happen. So we can repeat, we can sit a little play button and that's what will happen. So when we now preview the site, that's what happens. Yeah, it comes in. All right. It comes in. What do you think? Is that a decent come down,
Joel: maybe slow that down. I would think it could take awhile longer.
Joseph: All right. So let's up at two, one second and let's do one second.
All right.
It's a little slow.
Joel: That's what it was a touch though. So
Joseph: it's 2.7 and points.
All right.
There we go. So that is how you set up an interaction. So that is a, when it scrolls interview, that thing happens. So I would say we could do the same thing right here on this text. What do you think? Maybe not, maybe it could be.
Joel: Yeah, because you're scrolling. Yeah. Cause yeah, by the time they get down there, that'd be interesting though. Yeah.
Joseph: All right. So we're going to grab the copy wrapper. So we're actually going to open to save this one. All right. So now we're going to start a new interaction. So we're going to do an element interaction, and we're going to do a scroll into view and we're going to create a custom interaction and let's give this one an offset.
So we'll see what that looks. So we're going to give that a 20% offset and we're going to make a new timed animation. So on this one, we're actually just going to have it scale. So we are going to go down here and we're going to set as our initial state. The scale is much smaller, so it's going to start out really small, and then we're gonna come up here and we're going to duplicate.
And then we're going to say that it's just going to come back to normal. So it's going to come back to one scale. Then we're also going to add in capacity or drag this up to the initial set as initial, the capacity is going to be zero. And then we'll come in with another one and do a pasty. And we'll say a hundred percent opacity after a half second.
So we'll just drag these together. All right. So let's look at this one. When it come down, Oop, I'm going to start up here cause we're gonna pretend we're scrolling down. Now we have a little bit of an offset, so you'll see the thing hasn't started yet. So we're gonna keep scrolling.
And there it is. So that was our little offset that helped that not happen right away. So we can go down a little bit more to going and there it is. Cool. Our texts coming in. All right. So I would say we should now do a hover animation, so let's go to. These ones let's save this. Oh, I should actually named that.
We're going to call that the map copy in. All right. We'll save that animation and then we'll go here. So let's grab so we're gonna do a hover. Do you want it to happen when it just hovers on the image or when it hovers on the whole card?
Joel: So it'd be cool to cover on.
You tell me what that would be interesting to see what, what happens,
Joseph: I would probably just say that. Yeah, I would probably say the whole item. Cause we can scale up an item. All right. So we have the items selected, so we're going to do a mouse hover. All right. So we're going to do select an animation now for this.
We're just going to use an automatic or a pre-built one. So we're going to do group. So we're going to grow or no, wait, maybe I want, yeah, maybe I want to grow or no, I know. That's that won't change. I'm going to go to a custom animation. I'm going to add a new one and we're going to call this and F T scale in.
All right. So we're going to now grab it. And we're going to say scale to what we're going to scale to.
I don't know, overdo too much. We're just gonna do a nice little 1.1. So we're going to click save. Let's set. I've actually don't want that long of a delay because this will be a quick power sort of a 0.3. And we're going to do ease in. This is just how quickly it does the animation. So it just eases in.
All right. So we're announcing. But on this one, we actually want a hover out. Cause right now, if I do this, so if I now hover it, it scales, but it doesn't unscaled because we don't have a hover out said, so we'll now go back to this and we'll add up on hover out. We'll click start a custom animation. We're going to create a new one.
We're going to call it and F T hover out. And we're going to go here and because we scaled the other one, we're going to go to the. And we're just going to scale it to one. So when we hover out and we're going to ease that and do 0.3 and we're to say that, all so now when we preview this, however, is in hovers that hovers in covers out, what do you think of that?
Joel: That's pretty slick.
Joseph: All right. So we're going to save that one. I want to use. I move around. All right, let's do this. When, so we've got our section here, so we're going to do a page trigger. So we're going to do mouse move in viewport. So when the mouse moves in viewport, we are going to have the copy part risks play.
Now it's animation. Alright. We're now going to. Make some changes. So when the mouse moves, we are going to move this. So when it's at what's the X's, which way I'm trying to think now, X, zero. All right. So we're going to start off by doing negative 50, and then when it's at a hundred percent, we're going to move it to positive 50, and we're going to move it up and down.
We're going to go negative 50. And then we're going to move it positive 50. All right. So let's see how that works. All right. So that's coming just side to side. We're not getting up and down. Why is that
negative? 50 pixels. Oh I think I must have done this one wrong. 50 negative 50.
Oh, I see what I'm doing my bad. I'm not changing. What, which way I'm moving. So I need to change this. So this gets zeroed out. And this becomes negative 50 because this is the left and right. And this is the up and down. That's what I was doing wrong. Enter and then just 50. Okay. Oh,
sorry. This I accidentally had a zero in here and it's supposed to have been left blank. Because it was thinking I wanted to move at zero pixels. There we go.
Joel: Oh, very nice. Wow. That's cool.
Joseph: So the, it seems like we should have it opposite. I actually like those things to go opposite. So just for giggles while we're here, let's actually just go regular a hundred negative, a hundred regular hunter. And negative a hundred. Yeah, just, that's funny. Just actually accidentally having a zero in there, botches the whole. There we go. So now it looks a little more natural right there. We got that. We can hover over these things and there we go.
Actually, one thing we did not. Was, we did not set up hover on these. So let's grab this real quick and that's something we can just do over here in our states. So we'll do hover and then we're actually going to change the color of the font when it's on hover to maybe a little lighter. So there we go.
And now that's just, oh, cause I have that tab open. I can click. No. And then there we go. So now those light up, when we hover another thing I don't think we did is we fixed the menu button, but we never designed it.
Joel: Oh, that's right.
Joseph: So we are going to do that real quick. So we going to, we click on this icon and we go to the little settings toggle and we say, show the menu.
So we are going to, we're going to make the background color. Groups of my, on this menu button, where to make menu button white and where it changed the icon to our green. Nope. I don't want that. I need to go to topography, I think, and select green. There we go. And then for this all, let's just keep it simple and let's just do
And then let's center that copy. There we go.
Boom. And we can see how it's coming from down. We can choose. Do we want it to come from over in the settings so we can say, do we want it to come from down? Do we want to come over to the right? Do we want it to come from it over the left? Let's do I like the dropdown? Let's keep it as easy. He's in, or I guess, ease out and then let's preview that.
Here we go. Checking our information's.
All right. So that was using our interactions and animations.
Joel: No, I need to make our burger menu disappear. It looks like on,
Joseph: I think that was just a little glitch in there. I don't think it would actually work up here. I think it was just a little glitch. Alright. So two more things that we will go over. I don't see anything though, because I think we did all of our. Each Tuesday, but we're actually going to click this audit panel.
Oh, there is actually some stuff. Okay. All right. So when you're done with the page, you always want to come back and audit it. And a lot of this is related to accessibility. So we can now check this stuff. So this does not have old text. So we will not want to go to this image quick settings, and we need to give it a custom description.
Cute. Nessie with hat. Alright. And then we'll go back to our audit panel. Oops. Does that not take that? I don't know if it's not loading it. Let's see if it goes back that let's go to the next. Same thing actually, what I should do is because we use it more than one place. I actually want to click this little settings wheel here and copy paste this and then go to our assets panel, click on this and add it here.
And then we can go to our audit and now dealt with that. And we actually now need to click on this one and say, get it from the old text from assets. All right. So then we're, this one is missing it, so we should go to our assets and we should type in Scotland flag. All right. Boom.
So we're going up again? This one's not, oh, this one isn't done. So when you. Go here. And we say Nessie is spotted news paper.
I didn't spell that. All right. Then we've got a skipped heading level. So we used an H four here and we should have used an H three. So we're up that to. And stylistically. If we wanted the size of an H two, we would then do heading medium as our class heading the oops, no space heading medium.
And that is an Oop, I guess that'd be heading small heading and small. There we go. And that's how you would undo that while still maintaining the heading level for Google. Boom. All right. So there we go. We completed our audit. So the last thing SEO wise we would do for this page is we would open up the page setting. So we'd go to up here, go to the homepage, we click settings and we would now just have our general SEO settings.
So we would make sure our name is. And then we might do our little title tags. So what's a title that you'd want to give this just Nessie.
Joel: Let's see. Yeah. That's the be Nessie sighting NFT collection. Yeah.
Joseph: And this is just going in and telling Google what we'd want it to show. And then open graph is what you would want it to look like if someone shared this page to social media. So let's say we'd probably want a, one of our image. Oops. Save changes. So we're going to grab this guy's URL. So we're gonna click settings.
We're going to grab this URL from this, and we're going to go make that our open graph setting for this page. So we're going click settings, and then we're just going to go back to open graph and publishing. So this was what it would look like if someone shared it.
This is some other stuff that we're not really worried about. All right. So that is the, how you do some SEO settings. We did the audit and then all we would do is we would just come over to here and click publish and we publish to our selected domain. And so this will now work on publishing it. Love that think for a second.
All right. That's thinking, do you have any last questions at your first view into a web flow?
Joel: No, I really just had one that I was thinking of as we were just early on starting out, but I I'm sure I'll come up with more. As we were adding a bunch of div blocks to our pages, we were working with. And I was thinking about page load speed. Maybe that'll break out into two questions. So how to do div blocks work with page load speed.
Joseph: So div blocks. There's actually, that's a very good question. And FinSweet actually has a whole blog on how the blocks affect page speed and it is so minimal. You could probably have thousands of div blocks and it just would not draw down the speed on the page.
Yeah, I just I, unless you literally did, thousands upon thousands that were stacked with, and they each had their own class, you could run into some page speed issues, but web flow is so good at their there they use, I think AWS or some CDN for delivering page speed. So you would have a hard time.
Building a site. Like even if you had a CMS collection with 2000 items, the search speed for that is so fast and web flow that the most sluggish you could get your site is probably still faster than I don't want to make claims that we can't back up, but it probably faster than any WordPress site.
The other really cool thing when you upload images into web flow. So let's say you upload something that's 2000 by 900 or a thousand. They will automatically turn that into a hundred different sizes of that image and we'll send the smallest needed version to each site. So when we upload that, that newspaper on desktop, it will load a very small version of that too much.
Which will help improve the mobile speed is that as sometimes an issue with WordPress is when you're trying to deal with mobile versus desktop speed. Your mobile speeds really get hurt because you have images that you have to have high quality for desktop. So that's another really cool thing.
So I think speed-wise resource wise. There's just no comparison from what I've seen in web. Yeah. How confident do you feel mean how much do you feel like you learned how much you feel like you absorbed? How confident do you feel? Obviously we've improved incrementally. Yep. So where do you feel like you're at?
Give us some insight. All right.
Joel: I think I would say I'm maybe at a four out of
Joseph: 10 interest level or
Joel: knowledge level.
Which is pretty good. I would say that's a compliment to you. That's not an insult to you. That's a compliment to you.
Joseph: I'll take a four
Joel: because there's much that there's so much to learn in Webflow. That's pretty good after just however many hours of recording that we've done. And I don't want to over. Extend my capabilities after just a few short hours. So yeah, I would say impressed with your feedback. So thank you. Thank you.
Joseph: No, I would definitely say, I feel like at this point we probably have a solid foundation.
There are a lot more nuances, especially when you get lost and being able to unwind. I'm like what's going on and where the class is coming from. And like when we had the header issue, there's just so many things. That can be wrong. And so it's always like, all right, you got to start with the lowest class element and then you got to go all the way up.
And then especially when you're having issues on like desktop or tablet or when you're having issues on tablet, you've got to start on desktop, started the bottom class work. You're all the way up. Then go to tablet, start work all the way up. And it becomes a very large Daunting process to remedy issues.
And that's one of the important things about having a really good naming conventions and consistent styling. So that way, if you have a problem and you need someone else to open up your project, they're not just like what's going on in here. So that's sweet. I think I'd be curious to see if latch onto a web flow or, WordPress is a good comfort zone.
I feel at least now you've got the tools to open up a project dive deeper into, the fin sweet stuff. And just play around off camera, no pressure and stuff. All right. Good job. You now have an se site. Any last.
Joel: Thank you very much. Had fun playing with Nessie, showing off my NFTs.
Couple of my dad jokes them a few puns and
Joseph: yeah, time, you bet. And I'll be curious to see if you come up with more content than you end up wanting on the site, or, you want to change the user interface and stuff. Let's see if we can end up coming back for a follow-up series. If we determined the website, wasn't up to par.
Joel: We'll see how many offers I get on some way and NFTs people want to buy it. It'd be like, Hey, I love that one.
Joseph: Oh, there you go. There you go. All right. This is the end of this chapter. All right. We've completed it. All right. Let's sign off job.
Good job. All right. It's fun.
