Have you ever opened a website to be greeted by it raining carved pumpkins? What about a website that snows or has leaves falling in the background? Special effects and website animations provide amazing branding tools. Animations can grab the attention of your customers and immediately help them to identify with you – plus they look cool!
While it may seem like something only available to large businesses adding animations and special effects to your website can be surprisingly affordable!
How to do it & how much it should cost
Integration options vary depending on how your website was built. For WordPress websites there are a variety of tools & plugins which may add options to your website. This may be the same for other popular platforms such as Shopify & Drupal. Using these tools can be as simple as installing and configuring them. You can usually do it yourself with some effort or pay a professional for 1 – 3 hours to do it for you.
Custom HTML/CSS/JS solutions are also available to anyone with a website – regardless of what they’re built on. Unless you’re comfortable working with code you’ll probably need to hire someone for this – but it doesn’t have to be terribly expensive.
Let’s explore a few specific tools that can be used to help with both of these.
CodePen is a place where designers & developers share their code. Try going to Google and searching for “CodePen Holiday Animations” and you’ll see what we mean. If you find things you like you can usually pay a developer to adjust and implement them on your website pretty cheaply. This usually takes 3-5 hours of time per animation / special effect – meaning making your website snow could be as little as a few hundred dollars.
CodeCanyon is a website which sells prewritten scripts in a variety of languages. This is a great place to acquire WordPress plugins as well as plain HTML/CSS/JS solutions. Check out the search results for “Snowing” on their site to see what we mean! Adding these options onto your website will usually cost you the price of the software ($5 – $30) and 1-2 hours of a developer’s time to install and configure it for you.
Animation ideas & recommendations
There’s a lot of holidays out there and by extension a lot of possible animations! Here are a few common ideas we recommend:
- Season-specific animations for Summer, Winter, Fall, and Spring such as falling sun-particles, snow, colorful leaves, or flowers.
- Christmas-tree animations which have lights slightly glowing on them.
- A candle-lit pumpkin with your brand / logo carved into it.
- Animated presents falling.
- Fireworks animations go great with New Years and the 4th of July.
- Add some colorful falling easter-eggs or bunnies for Easter!
- Waving flag backgrounds can be a nice touch for Veterans Day & Memorial Day.
How much we’ll do it for
The price varies a lot depending on your exact wants. We can add pre-built animations onto most websites usually for $300-400. We can also build custom animations for your business on request which generally costs $1000-$2000.
Tips & Tricks to Maximize Impact and ROI
You might be wondering where the ROI is for investing in website animations. Sure they look cool – but how do they make you money? The answer is simple. These special effects help “set the mood” and connect with your customers. By identifying with your customers you increase the probability of them purchasing your products and services. In a nutshell this is why most major businesses decorate their storefronts for every single holiday! With this in mind here are a few tips & tricks to help you maximize your success:
- Know your customer. If you run a party planning service and you have a large market for planning Bat Mitzvahs then having a picture of a Christian Cross on your website might be a bad idea.
- Don’t overdo it! Animations look awesome but don’t let them distract from the things that are really important. The goal is to connect with your customers – not to overwhelm them. Consider implementing seasonal animations on specific sections of your website. Leverage transparency to make them less noticeable. There is no real secret sauce for this – just use your best judgment.
- Test your animations everywhere. Make sure to test them in multiple browsers and on mobile devices (different computers, tablets, and phones). Many animations add elements over the top of your current website. It’s possible that other elements (like your product or navigation links) may become unclickable. This can easily be avoided by testing.
- Consider disabling animations on mobile devices. Since mobile devices have very limited screen real estate it’s important to make the most out of what’s available. Adding animations on mobile devices can potentially slow your load-time and overwhelm users.
- Monitor results closely using Google Analytics and know how to kill it. This is a good rule for everything you do with your website. Compare your website’s performance metrics before & after implementing animations. If you see substantial negative impacts then you should probably kill the animations. For lesser negative impacts consider doing A/B testing – serve one copy of your website to some customers with animations and another without and see the results!