Animate a Webflow Website - From Figma to Webflow - Part 4

Video manuscript has been edited for readability

This is the fourth installment of the series from Figma to Webflow.

If you haven't seen the other three installments, I would suggest you go back and watch those and then come back to this video after you do that.

But if you want to learn all about animations and some of the best practices for creating animations when taking your design from Figma into development in Webflow then stay tuned.

What we will explore in today’s video

• When you should animate
• How you should animate
• Animation best practices

I’ll save you time and help you with SEO so your clients will be able to get their own clients organically.

Let's jump into the computer and talk a little bit more about this.

Alright, we are in the computer, and you can see I have the site up that we've been working on over the last several installments of this particular series.

Creating a Page Load Animation in Webflow

One of the things that I want to show you as we begin is the page load animation that I created for this particular project.

As you can see it's rather quick, but you have the logo against the black backdrop and that logo fades out and then the curtains open and shows the website with the main header text coming up from the bottom to really try to capture your attention.

One of the points of a page load animation is to elevate the brand.

A white logo against a black backdrop along with other colors as we roll into the website. These colors are meant to symbolize luxury which can help to elevate the brand.

Page Scroll Animations

As you scroll down the screen, you notice I have some subtle animations. There's nothing crazy or out of the ordinary that is happening. Some slide in from the bottom animations as well as in this particular section, you have some pictures moving with scroll just ever so slightly. Nothing major.

Then when you get down to the CTA section, a nice subtle animation there as well.

Keep your animations subtle

Now you noticed that I've said the word subtle several times, and then I'll walk you through this particular home page. I've done that on purpose because one of the things that I think we forget,  and particularly with Webflow and the superpowers that it gives us when it comes to animations, is that most people take those animations to the extreme.

But most websites don't need extreme animations because most websites are not looking to win some sort of an award.

Animations shouldn’t just impress, they should be useful

I would also argue that even websites that are looking to win an award, shouldn't be taking animations to the extreme. Rather what we should be doing if we're going for an award or just building a website for a client is we should be asking, is this animation going to be helpful to pointing the user to a particular information that they should be looking at or is it not?

As you see the this animation here when it loads we certainly want them to see the logo and then also we want to see, we want them to really see that that header, hero text, award winning social media marketing.

As the website loads, you really can't miss that because it's there. It's popping up. It's moving. People are going to be drawn to that right away.

One of the things that you need is people drawn to your website so that they want to scroll.

As well as when you scroll down, the slight movement of the pictures might draw your attention a little bit longer to that particular section so that you decide to click on one of these case studies or so that you just noticed that they have worked with big name brands. He is helping them with their social media and branding, and he can do the same for you.

Animations should take over the show

Making sure that the animations that we're doing is not taking over the show because that's not their purpose. Instead, animations are meant to highlight particular pieces on the website that you want people to look at.

Animations can elevate your brand

It's also to elevate the brand so that it's a little bit different than other websites. You're setting yourself apart from your competitors. You're doing that with good design. You're doing that with good copy. And you're also doing that with good animations.

When should you build animations in the web development process?

The other thing that you should take into consideration when you're thinking about animations is when to build them.

You might think animations are so cool, and I want to put those in right from the beginning. Some of those you might need to put in from the beginning, but one of the things that I do is I wait till the very end in order to animate my projects.

Changes inevitably occur even if you walk through the best design process, changes will inevitably occur in the development stage of the project. You need to make sure that all of those changes have been done. If not, you're going to be spending time animating something that may just get nixed or may get changed to look completely different by the end of the project.

I would say, leave your animations until the end, until everything is set, everything is good,  nothing else is going to change. Then do the animations for the project. That is not only going to save you time, but it's also going to help you to understand what it is that you need to highlight through an animation.

Use classes in your animations if you are going to reuse sections in a website

The other thing that you can do to save time and this is also goes back to the build is making sure that you're utilizing classes in your build, but also utilize those classes that you have used in your animations. So the two column layout component is something that I've used throughout the website. If I animate that particular class and I use that as a slide in from the bottom animation, all I have to do is make sure that that's applied to each of the pages so that that same class will be targeted with that same particular animation. That's an easy way to to animate an entire site rather quickly.

Animate components

Another thing that you can do, again, this has to make sure that you've done the build process,  but animate components.

This is a component. One of the things that I've done is I've animated the component using the class so that all of these right here are animating.

I've animated the particular component that I'm going to be reusing on a number of different pages. This will save you a lot of time as well. It will animate those components throughout the website.

So animate on classes that you're reusing, build with classes, that you can reuse throughout the website as well as components.

Cleanup your unused animations at the end of your project before launch

The other thing when you're thinking about animating a website.  When you get done with the animation process is clean up your interactions.

You want to make sure that you click that button and then if there are any unused animations,  you want to make sure that you delete those.

This will keep your site nice and clean and get that site ready for launch.

SEO considerations for animations

When it comes to SEO and animations, one of the things that you can do is, obviously, keep the animations to a minimum. Don't go crazy with them. Don't be shifting text all over the place throughout the website.

But the other thing that you can do if you're really concerned about page load speed, and you do want to be, is to put the heavier animations on the desktop. Remove some of the heavier animations from the mobile version of the site.

Now, I don't mind these animations.  haven't loaded this site up with animations, but other sites, I have done that where I've animated more heavily on the desktop. Then when it comes to the mobile version, I've removed those animations just to reduce a bit of weight so that it's not taking forever to load.

Google whenever they're doing the lighthouse score for your website, they're looking at the mobile version. Everything's mobile first now. We want to make sure that what we're doing is playing nice with mobile and it's not hogging a ton of data.

You can actually remove some of the animations that don't make sense for mobile or either are really heavy, to help you with SEO.

Conclusion

Thank you for joining me for this fourth installment from Figma to Webflow.

We're getting super close to launching this website.

In the next installment in this series, we're going to be looking at launching the website.

What is the process? How should we think about launch?  What should we do before we launch a website?  Tthen how do we hand the website off to our clients once we have launched that?

Hopefully you'll join me on the next installments of this series from Figma to Webflow.