3.4 Add Animations

Hey welcome back to build a one page website with Froont, no coding required. Our layout is all done so everything is just about ready to go. Our responsiveness is all in place. We're just going to add one final layer of polish by including some fading animations people will see when they first land on the site. So what we're gonna do is start by selecting our header container. So we can do that here. And I'm just gonna close down these other sections. What we're looking for is the behavior section here. Now this is gonna give us a few different types of animations that we can choose from. I'll just scroll down so there's a bit more space. And there's a few different types of animations, but we're just gonna go pretty subtle and we're just going to use a fade in animation. So there you go, you saw that just fade in, the way to trigger an animation to play when you want it to in Froont is just hit the preview. So there you go, you can see our header fading in. We have a couple of settings here, we can change how long that fade in animation runs for and we can set when that animation is triggered. So if we want the animation to play immediately, we just set that to 0 seconds but if we want to wait a little while, then trigger it then we'll increase the delay. We're gonna use that to stagger the fade in of this section, our background panel, and our features panel here. So let's do the same thing for our background panel in the features area. So we'll choose Fade in, scroll down and choose Fade in. We're gonna leave the duration the same, but we're gonna give it a 0.5 second delay. So now when we preview, we have this really nice staggered effect where the first section comes in and then the second section. But we can take that once step further and have the content have a staggered delay as well. So we'll select this box here, once again we'll choose Fade in. We'll leave that duration the same and this time, we'll push the delay out to 1 second. Now let's see how that looks. So there we go. So now we've got this really nice, smooth fade in. I'll just play it a couple times more. And it just softly introduces each aspect of the page. You can also have the next section fade in as well, and I played around with that a little bit. But the trouble is that if you do have this section come in as well, because it can be off the screen when a person first lands at the website, that fading doesn't actually get triggered until that section is on the screen. So you'll land on the page. You'll see this nice fade in. Then you'll scroll down to look at the rest of the page and you'll still see this fading in when you really want to be able to read it the moment that you scroll to it. So definitely continue having a play around with those animations if you want. There's a whole bunch of different effects that you can choose here. You can also set an animation to loop. That can be handy if you wanna do, say, a loading animation, or if you wanna have something bouncing up and down on the screen. Try to be a little subtle with these things. People will get irritated if you put too much movement onto a page, but as I said for a little bit of polish, these types of animation effects can be really nice and can add to your overall presentation. And with that, that wraps up our one page website. We've got everything in place, we've got all our content sections, our images, our text is styled. We got our subscription box and our footer. Everything is responsive and we've got some nice fade in animations to go along with it. So we've just go one more video left in the course and that is a quick summary. I always like to give you everything crunched down into a nutshell so that if you need to come back and just refresh your memory on how to work with Froont in the future, then you can just jump to this wrapping up video and it'll give you everything that you need to jog your memory compressed into a little packet. So I hope you'll join me in the final video for the course. I'll see you there.