The Rise of Subtle Animation

The Rise of Subtle Animation in WordPress Themes – Add some motion to your message with these animated WordPress themes.

It used to be that animation was only attainable through the likes of Flash or Silverlight. While effective, these solutions required the end user to download a separate browser plugin to view the content. It also required web designers to use specialized software to create that content.

These days, animation is baked right into CSS3 and popular JavaScript libraries such as jQuery (which happens to be included with WordPress). Both are fast, efficient and won’t require any special software to implement or view.

And themes are taking advantage of these new methods to beautiful effect. Let’s explore some WordPress themes that will help you use animation on your website.

Make an Immediate Impact

By default, web pages simply load in all at once. Or, at least, with the prevalence of broadband connections they appear to load that way. It’s not very exciting and something most users take for granted.

Adding some tasteful animation as the page is loading can help grab (and keep) a visitor’s attention. Below are some themes utilizing animation that will immediately keep eyeballs glued to your site.

Content that Rises to the Occasion

A well-done animation that runs as your page loads can really grab a visitor’s attention. The Premiumlayers – Responsive HTML vCard/Resume theme features animated content that rises up in a silky-smooth fashion.

Premiumlayers - Responsive HTML vCard/Resume

This Bootstrap theme is perfect for showcasing your talents to prospective clients or employers. Included are support for Google Maps, Font Awesome icons and lots of ways to easily customize the look and layout.

Transition to the Next Phase (or Page)

Showing off your portfolio should be more than just a static group of project listings. BePortfolio – Behance Projects WordPress Theme uses breathtaking page transitions that will lead visitors on a journey to explore your talents. Whether it’s the revealing curtain effect of the home page or the sweeping manner in which the navigation appears, you’re sure to leave a lasting impression.

BePortfolio - Behance Projects WordPress Theme

Using the included BeDojo – Behance Works WordPress Portfolio Plugin plugin, you’ll be able to import your Behance projects right into your WordPress website. Not a Behance user? You can also add projects directly from WordPress as well. Other features include support for Google Web Fonts, custom theme options and blog templates.

Moving Images

Photography is an excellent resource for telling a story and setting the right vibe. Hera – Creative Multipurpose WordPress Theme lets you combine the power of a great photo with an impressive animation effect. The large “hero” image at the top of the page scrolls horizontally – perfect for showing off that extra-wide picture of real estate or a vacation spot. Animated “light up” text adds an element of color to the mix.

Hera - Creative Multipurpose WordPress Theme

Hera includes several layouts, including the “Moving Image” template featured above. You’ll also get a copy of Visual Composer, a filterable portfolio, parallax scrolling, pricing tables and plenty of ways to customize the theme to your specifications.

Simplicity

Sometimes we think of animation as a big, complicated thing with all sorts of special effects. The truth is that a short, simple animation can be just as effective (if not more so). Infinity – High Performance WordPress SEO Theme uses a simple animation on its slider with text and an image quickly scrolling into view. It’s a nice way to get someone’s attention without trying too hard.

Infinity - High Performance WordPress SEO Theme

Infinity also provides you with several options for your site’s header and navigation, custom sidebars, various layouts and a user-friendly shortcode generator.

Animation in Unexpected Places

When I was trying out the Evoke – WordPress Theme theme demo, their use of animation caught me by surprise. The site’s background image (in this case, a photo of a snowy mountain) slowly moved up the page.

Evoke - WordPress Theme

Somewhat similar to what the Hera theme above does – only on a grander scale. While this may not work for every type of background image, a beautiful nature scene with muted colors could be nice touch.

Evoke is designed to help promote an app or service. Inside you’ll find the Unyson page builder, animated header images, parallax scrolling effects and pricing tables.

In SVG Animation in Web Design, you’ll learn how SVG images are created and why they’re fantastic for use on the web. You’ll also find a collection of SVG animation tutorials and open source code to help create unique SVG animations from scratch.

Unique Animations that Stand Out

Of course, animations don’t necessarily have to take over an entire page to be effective. Single instances of animation – even a small one – can draw attention to a particular item of interest. And, animations that run after a user interaction (a click, mouseover, etc.) add elegance to any site.

Let’s check out some themes that feature animated elements in different ways. Some are subtle and some even provide unique tools to help you customize the effect.

Build Your Own Animations

While it’s great to take advantage of built-in animations, the more detail-oriented among us might enjoy creating our own. The popular Quasar – WordPress Theme with Animation Builder theme includes a feature called Curvy Slider that will let you customize animations to your heart’s content. You have the ability to plot transition points, change effects and create cool animations that will be unique to your site.

Quasar - WordPress Theme with Animation Builder

Quasar also sports an Ajax page builder, a form builder, an Ajax portfolio and parallax background images. There is a lot of potential for creating a highly-custom look.

User Activated Elements

Since the days of the JavaScript mouseover, hover effects have played a big role in UI/UX. They not only look good, they also help users to better understand how to navigate a website. Tao- a modern / responsive 3D WordPress portfolio theme with beautiful transitions is a theme that animates virtually every aspect of the UI – including some nifty user-activated elements like the example above.

Tao- a modern / responsive 3D WordPress portfolio theme with beautiful transitions

Beyond the plethora of animation, Tao features design elements for sliders, photo galleries, lightboxes and videos.

Counting Up Your Accomplishments

As featured here in the Democracy Political – Lawyer WordPress Theme theme, animated elements that “count up” to a specified number have become a very popular way of displaying statistics. As the user scrolls down and the elements come into view, the animated numbers whizzing past call attention to your vital stats.

Democracy Political - Lawyer WordPress Theme

The theme also includes three different homepage layouts, a selection of five different types of sliders to choose from, Xpress drag and drop page builder and a selection of custom widgets.

Smooth Scrolling

Sometimes animation can do things beyond what we traditionally expect. When using anchor/bookmark links to a specific part of a page, the smooth scrolling effect can be used to slow down the speed of the scroll. This results in a smooth, serene motion. You’ll see it in action with the Profiles – Responsive WordPress Theme theme. On a single-page site, navigating to different sections is akin to a Sunday drive in the country.

Profiles - Responsive WordPress Theme

Profiles also showcases six home page layouts, a custom header builder, 23 custom WordPress shortcodes and six custom plugins come bundled with the theme.

Not-So-Lazy Load

Lazy load functionality is often used on sites that feature a lot of scrolling content. Here’s how it works: As the user scrolls down, items are dynamically loaded into view. This cuts down on the load time of the page and can make for a better user experience. FoodFarm – WordPress Theme for Farm, Farm Services and Organic Food Store uses this technique, but implements animation to create a more eye-catching aesthetic. Content appears with fluid animation, which brings both a perception of speed and class to the page.

FoodFarm – WordPress Theme for Farm, Farm Services and Organic Food Store

Built with foodservice or retail stores in mind, FoodFarm also includes six homepage layouts, multiple header and footer styles and is compatible with WooCommerce.

Add Some Motion to Your Message

Looking through the different types of themes above, it becomes clear that animation has really become a staple of modern web design. With the tools and techniques we have at our disposal, adding animation is quite easy. Plus, your website won’t take a performance hit.

CSS3 is one of the greatest leaps forward in modern web development, and these animation code snippets are a testament to the design possibilities at your disposal.