Mac SEO Blog

The recently released EverWeb 2.2 added an all new animation engine to the product, giving you 16 different types of animation effects to choose from. Animation effects can really bring your website to life and you can get really creative in the process! Let’s look at how to create an animation and when it is good to use, or not use, an effect in your website.

How to Create an Animation Effect

Creating an animation effect in EverWeb is easy…

1. Start by selecting an object to animate. This can be a Text Box, Shape or Image. You can even animate widgets with the exception of the RSS Feed and Image Gallery widgets. The widgets used to display the blog main, archive and blog post contents are also excluded.
2. Next, go to the Shape Options Tab and tick the box next to the ‘Animation’ section to access the available options.
3. Begin by choosing an Animation effect from the first drop down menu.
4. Use the second drop down menu for additional options for the animation effect you chose in the first drop down menu. If you selected ‘Other’ in the first drop down menu, you will see a list of additional animation effects displayed in the second drop down.
5. You can see a preview of the effect in the Preview box at the bottom of the Animation section.
6. Once you have selected the animation you want, use ‘Duration’ to specify how long the animation is to last (in seconds.)
7. Use ‘Delay’ to time when you want the animation to start, for example, if you have more than one animation effect in use, you may want to set a delay to stagger the effects them instead of them all being animated at the same time.
8. Use ‘Repeat’ to trigger the animation effect again for the amount of times you specify.
9. To see the animation effect in action, select Preview or Publish from the Toolbar.

When To Use Animation Effects

Using animation effects is a great way to bring your web pages to life, but there are also some caveats. Often sites that use animation tend to be look gimmicky. Here is our guide to when animation effects should be used:

Less is more: It’s best to use animation effects sparingly. Too many effects will just confuse your audience as they will not know where to focus their attention in the frenzy of effects on the page! Using fewer effects also makes the effects more fun and less gimmicky.

Focus: The main reason for using an animation is to bring your visitor’s attention to a particular part, or feature, of your page. For example, if you are selling concert tickets you may want to animate a ‘Buy Now’ button using a Flash or Pulse effect to lead your visitor to where you want them to be. Equate focus to ‘Call To Action’.

Timing: Your animation effects should be timed properly, not too fast and not too slow e.g. if you are animating a heart shape you will want it to beat (using the Pulse effect) at the right speed! Use ‘Duration’ to set the length of the animation and ‘Repeat’ to loop the animation. Always test your animations to make sure the timings are correct. You may find that you are adjusting your timings by 1/10ths of a second to get the effect spot on!

Suitability: When animating objects make sure that the effect used is suitable for the audience you are targeting. Remember that animation is a component of your page design and should be a natural ‘fit’ in your design. For example, if you web site is for a legal firm, you probably will want subtle effects rather than ‘comedy’ effects!

Telling a Story: The great thing about animation effects is that they can help you tell a story.e.g. a photographer may want showcase his/her work first before you see anything else on the page (such as navigation menus, text etc.) In this example, start with a blank page. To achieve this, first add all of the objects you want on to the page. Next, set a ‘Delay’ for all of the objects as this will delay them from being revealed. The last object you want revealed will have the longest delay, the first object you want revealed will have the shortest delay.

Next, you may want to use ‘Flip’ or ‘Fade’ effects to dramatically display the photographer’s images. Use a short Delay to quickly reveal each image for maximum effect. Next, you may want to fade in text boxes to explain the images using a delay long enough for the reveal of the images to have completed. Finally, the page is completed by adding a navigation menu, social media buttons etc. again using the ‘Delay’ property and the ‘Fade’  effects.

Testing: Always use Preview to see how your effects will look and if you need to adjust the Duration, Delay and/or Repeat. Remember that if you want to replay the animation effect in your browser just hit your browser’s refresh button unless you have changed the effect and need to Preview it again.

Planning and Testing

Animation can produce some amazing and fun effects. They can also add subtlety and style to your pages. The over-arching theme to remember, though, when using animation is planning and testing. Think about what you want to animate, why you want to animate and how you want to animate. Plan out the steps you need to achieve this. In the examples given above, typically you design you page first add the animation afterwards. In the photographer example, the page gets deconstructed so we want to work back from a complete web page to a blank looking page using animation to do so. Planning is essential when creating complex animations or storytelling style effects.

And as always, Test, Test, Test! Creating great effects can be sabotaged by poor timing or by delays that are either too long or too short. If you can test out your animations on others to see if your timings are correct! And don’t forget to test on mobile devices as well to see if what is effective on a desktop is also effective on a mobile phone.

Enjoy the animation effects in EverWeb 2.2 and please let us know if you have a question, or want to share any tips or effects work with us in the Comments section below!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw