Static vs. animated websites: Which is better for your business?

Should your website have animations or be completely static?

I think animations should be used minimally and purposefully to guide attention, increase engagement, and spice up your CTAs, rather than solely for decoration or a “look what I can do” brag. Of course there are a few creative industries where funky animations really support their branding, but for the average service-based business, complex animations are overkill and potentially hinder conversion rates.

It’s also really important to respect your user’s boundaries. I’m getting a bit technical here, but developers should be adding in the ‘prefers-reduced-motion’ media query. It’s a really simple way to make sure users with that setting turned on aren’t bombarded by motion they didn’t ask for (and is a must for accessibility)!

Some ideas and rules I try to follow:

• Content pacing: Letting elements “fade in” as you scroll so the user can digest the information section by section, rather than being hit with a wall of text. This increases engagement but doesn’t confuse the user.
• Sticky menus: A personal favourite of mine to get creative with. Colour changes and movement in the menu to make it remain visible and ‘sticky’ when the user scrolls away from the top of the page. Just make sure this doesn’t hinder the user’s ability to actually click the menu!
• Subtle motion and feedback: Use motion to draw the eye to key “Book Now” buttons, or provide visual feedback (like a button changing colour when hovered) so the site feels responsive and alive.
• Placement of animated components: If you really want to try something different, keep it towards the bottom of your home page, or on the about page. Animations can be a fun way to display your company info, but just make sure it isn’t in the way of people finding what they’re looking for.
• Skip these: Avoid background videos that take more than 10 seconds to load, content that flies in from every direction in a random order, or “scroll-jacking” (my personal pet-hate, stay tuned for a rant article). This is where a website overrides your scroll wheel, altering the speed at which you navigate the website. I don’t know why so many agency websites do this!!!

Send me a message if you want to talk about how we can incorporate animations into your new website without going overboard! I use the GSAP library in Webflow, or Animate.css for Bricks Builder (WordPress sites).