The Use and Abuse of Animations on Websites

Update

Thrive Content Builder and Thrive Landing pages have been replaced by Thrive Architect, which now has 271 pre-designed page templates and you can preview them all in our landing pages gallery.

Today's video relates to one of the features in the Content Builder. However, just like with my post about progress bars and counters, this video is more of a "how not to" than a "how to".

Watch the video to learn the 3 things you must know before using any animated elements on your site.​

More...

Video Thumbnail

The main takeaway is that animations, when used incorrectly (not following the 3 steps in the video) will simply add to the waiting time for your visitor. And trust me: no one has ever looked at a website and thought to themselves "you know what would make this site better? If I had to wait a little longer before I can see the content!"

In the video above, I show you why is it a bad idea to use abundant animations through practical examples.

Don’t you worry - it is possible to use animations on your website without damaging  its performance. Here are 3 simple rules to follow:

  • Do not animate anything above the fold. The top part of your website is the first thing a new visitor sees when they arrive at your site. This top part should give a clear picture of what visitors are about to see on the website. If you use an animation here, the first thing your visitors see would be a blank page, which should be avoided at any cost.
    Let’s go even further; do not use an animation anywhere close to the fold, either, because the animated sections are invisible until visitors start scrolling. You’d be surprised how many people would assume that there is nothing below the headline of your website and not scroll down.
  • Do not animate entire rows and sections. Readers might scroll through that whole row as initially there is no signal for them that there will be something to look at. Instead of doing this, animate only part of that section. This will help drive their attention to that animated element.
  • Have a purpose of using an animated element. Ask yourself about the goal of the website and how a particular animation would help you in reaching your goal?

The Generic Animation Problem

​A point to add to the video: animations can be very useful when they are used to illustrate something. Instead of trying to explain a process in words or with static images, it can be much more effective to show that process in motion.

However, a theme or plugin cannot provide this kind of animation, because it needs to be hand-crafted for the exact thing you need to illustrate.

Since that's time consuming and expensive, I recommend that you use videos instead. It's not the exact same thing, but you can much more easily record a quick presentation to illustrate something than create a custom web animation for it.​

Agree? Disagree? I'd love to hear your thoughts on this topic, so please leave a comment below!

Shane

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Dean P says:

    Love all this great content Shane!

    You should do a blog post on how you create these posts (the slides, the video, the editing etc) on Im Impact :D

    • Shane Melaugh says:

      Thanks, Dean. I have been neglecting imimpact a bit, lately. This might be a good idea to get back into it. :)

  • BK K says:

    Hi Shane,

    Great post, I’ve just removed animation that just looked good but had no purpose. However, the page loads faster & look better now..;-).
    Cheers
    BK

    • Shane Melaugh says:

      Good to know and good for seeing and implementing right away!

  • Erik I says:

    Good point of view.
    Years ago when we got word as program, most people put several font heigths in theri documents. Then we all got a colour printer, everyone put several colours in their prints. Then the first websites came around. And everyone should have an animated letter as their mailbox link.

    Now it’s happens with i.e. with wordpress sites. Few years ago it’s was slides, now it’s animation all over the site. But it will disappear again as most of the font heights and colours. :-)

    • Shane Melaugh says:

      That’s a good analogy, Erik! I think you’re right that this is part of the problem: we want to apply the “new thing” to our website, whether it makes sense or not.

  • Mark W says:

    Thanks Shane that is really clear and helpful.

    I created a post about Checklists with 10 items and each has an animated icon to draw attention to that section.

    On my mac it works fine but I guess there is the issue of older / slower machine and quality of internet connection to contend with. To be honest I hadn’t thought about phones in this context and I think maybe the post will be too slow loading and therefore lose impact.

    I’ve added the link below and would really appreciate your thoughts but I understand if you want to remove the link

    Thanks, Mark
    http://brilliantlittlebusiness.com/10-big-reasons-why-checklists-dont-work/

    • Shane Melaugh says:

      This is nothing to worry about, performance wise. First of all, we’ve developed the animations feature in a way that’s as lightweight as possible and second, you’re only using two different kinds of animations and only animating a couple of elements. This is not what I’d call excessive at all. You also did well to only animate the images and not entire rows of content.

      While I don’t know how much value the animations add to this page, they are certainly not doing any harm, when used like this.

      • Mark W says:

        Thank you Shane for taking the time to answer.

        Like you I’m not sure if there’s any real added value (apart from making the page perhaps look at little more “alive” which is probably a good thing) but my real concern was whether there was a downside re performance etc.

        Thanks again

  • Christopher Y says:

    Excellent! Do you apply the same rules for slide shows on the home page or rotating banners?

    • Shane Melaugh says:

      Hi Christopher. Actually, for sliders I have a much simpler rule. It goes like this: never use a slider.

      I will publish a post with a detailed explanation and some stats to back this rule up, in the near future.

  • Jan says:

    Hi Shane,

    greate post. I always hated Websites with all these flashing elements.

    But do you have some examples of good use of animation?

    thanks
    Jan

    • Shane Melaugh says:

      Good examples are quite difficult to come by. I tried finding some for this video, but came up empty.

  • Jackie Spell says:

    Thank you for this. I must say that when you scroll down and the text with the circle image appeared, I thought it was a slide. Both text and the image glided smoothly on to the page. Thank you for sharing. However, I do have a small question. If I created a website and place an animation or slide (just one) below the fold, would it slow down the loading of pages, distract the visitor, or I need to test this and not waste you time? LOL!

  • >
    The SEO Sprint Launch Discount Ends In:
    04
    Days
    23
    Hours
    50
    Minutes
    58
    Seconds