We love Webflow animations as much as anyone. But, would most websites be better if there were no animations at all? Heresy, I know, but, hear me out.
You never forget your first... time discovering how to animate within Webflow. The Webflow interaction panel allows the web designer to create the animations they've always wanted to without having to learn code. With Webflow animations, you can keep making amazing websites that are super fun to interact with (these websites can even snag you that coveted Site of the Day award!)
But, have we come to the point where some, nay, most websites would probably be better WITHOUT any animations at all?
If you're a Webflow designer, the last thing you'd want to do is get carried away with these animations that you end up creating a client's website which is really cool but has a horrible experience for their users.
So, should we just NEVER animate our websites then? Website animations, when done tastefully and correctly, can be a great benefit to the website and enhance the user experience, but, when the animations are built without the proper mindset, they can drastically hurt the user experience to the point that it could push away potential customers resulting in lost business and revenue for the company (or your wallet if you're a one-person freelancer).
Before we keep going, let's start with the 30-foot view question.
In my humble opinion, this is the greatest benefit of adding animations to your website. Marketing websites should tell a story which leads to an action - whether they be a home page, product page, or landing page. Animations on a website can greatly enhance the storytelling creating an experience for the user instead of just reading words and looking at images on a screen.
A great example would be this page created by Joseph Berry: Oreo, the Playful Network.
Notice how the Oreos on the side move with you in a playful manner as you scroll down while projecting these "network" rays similar to how we view a wi-fi network. This is an awesome page that uses animation to enhance what the page is about - a PLAYFUL. NETWORK.
Bonus points as well for using Oreos to tell that story!
We tried to apply the same mindset as well when envisioning the animations for our website. Everything from the lines form as the website loads to the words and logos filling in the outlines as you scroll down - we wanted to tell a story that, just like a website, we are always striving to improve, to be better, to push boundaries... because we are all unfinished.
The most important elements of the website are the content. They are the ones that will tell the story, intrigue users, generate leads, and, ultimately, help generate business. Animations, when done correctly, can help emphasize or even further the message.
If "a picture is worth a thousand words," then how many words is an animated picture worth?
Let's face it. We all want to impress people. We want to make the website cool, have that "wow" factor, and make the viewer go "ooooooh" and "aaaaaah." Animations can help accomplish that desired effect.
If the website is for a portfolio, a design agency, or for a job application, the right animations can help set you apart as well.
In writing, every word should have a purpose. In design, every design element should have a purpose. In websites, everything should have a purpose.
Many Webflow creators love putting animations for the sake of putting animations.
Don't do this.
Content is the most important element of a website. It's what tells a story to an audience, it's what communicates the need of the product, it's what affects the user's previous perspective and changes it towards needing what you have to offer. Unless you are an animator and you are creating your portfolio website, the animations are not as important.
An example of that would be this website we created for an award-winning cinematographer. The main goal was to highlight the beautiful videos he's created for celebrities like Eminem, Michael Bublé, James Harden, Kid Laroi - the list goes on. Therefore, we wanted to make the website as minimal as possible with integrations that would create a great experience for potential clients such as directors, producers, or film studios.
Content is King.
From an outsider's perspective, too many Webflow sites with over-the-top animations seem like they all have one goal: to win an award (or awwward, if you know what I mean). Now, if that is the goal, then, by all means, animate the heck out of that website. For example, our agency is currently working on a website right now for a client. The client specifically said this "We don't need good SEO, we're not trying to sell anything, we honestly just want a really cool website." So, guess what? We're gonna animate the heck out of this website!
But, if you're creating a website for a client who wants to sell more products, raise awareness for a cause, expand their brand, or get more customers., is that rocket that flies in every time you scroll up and down really gonna help with that?
Know what the purpose of the page is and what the goals are, and make sure that the animations are not overtaking them.
Webflow developers definitely need to be careful of this one. Whenever you add animations, you have to keep in mind that you are adding javascript to the website. This particular script source is called in the head of the page which results in this script being loaded first before the actual content. This lag of loading time can give your site a lower page speed on Google and even hamper the user experience by causing them to wait (especially depending on their browser, device, internet speed, etc.)
Though the script snippet itself may be set to "async," it is still best practice to try to minimize all of the scripts being loaded onto your site. Therefore, unnecessary animations can contribute to slowing down your website.
When the content and the animation doesn't connect and the animation is not serving the content well, then all it is is a distraction. Distractions are nice, they're pretty, but, at the end of it all, they are simply that - a distraction.
The animation should be a vessel that serves up the content in a way that the user is either attracted to the content (not the animation) or, if done properly, even enhances the content by having it part of a story.
When I worked as a consultant for Enterprise companies in Webflow, a particular company wanted to ask me how to accomplish a certain animation experience in Webflow. They were inspired by Webflow's own website and wanted to do a similar animation with their website. To describe it simply, it was a scrolling animation that would show screenshots of their product UI moving from the left of the screen to the right of the screen and back and forth as a user scrolls down. So, as you can imagine, there was a lot of movement with what they were hoping to achieve.
After showing them how to create that certain animation in Webflow, they asked me what I thought of the website from a design perspective, and, specifically, this page we were looking at. I simply asked them, "Do you think that this animation you're trying to achieve is attractive to your market audience?" You see, they were a SaaS company that markets to lawyers and legal firms.
"Yes, you were inspired by Webflow's website, but, you need to remember, Webflow is marketing to creators and designers. You're marketing to a totally different audience."
This goes back to the previous point #1 of simply putting animations for the sake of having animations. Do you have the typical user in mind when working on these animations?
We tried to keep the user in mind when creating this landing page for SmugMug. The landing page was marketing to creatives, particularly photographers. So a photo-rich design with animations that tell a story was what we aimed to achieve.
