{"id":139772,"date":"2018-07-23T11:00:57","date_gmt":"2018-07-23T16:00:57","guid":{"rendered":"https:\/\/getflywheel.com\/?p=28046"},"modified":"2024-01-01T06:30:28","modified_gmt":"2024-01-01T12:30:28","slug":"how-to-strategically-add-animation-to-your-site","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/resources\/how-to-strategically-add-animation-to-your-site\/","title":{"rendered":"How to Strategically Add Animation to Your Site"},"content":{"rendered":"\n

The use of animation in web design isn\u2019t exactly a new thing.<\/p>\n\n\n\n

Remember the long gone era of rotating 3D gifs?<\/p>\n\n\n\n

How about the life and death of Flash?<\/p>\n\n\n\n

After Apple banned the use of Flash on all their mobile-based devices, designers were quick to figure out a way to get animation back in the game. Thanks to the creativity of web developers and designers, we now have the magic of CSS3 transitions, SVG animations, high-quality GIFs, and of course, animated videos created with programs like After Effects and Blender.<\/p>\n\n\n\n

There were a few years recently where the trend was to design flat sites. Thankfully, animation has made its way back in a big way and is now one of the biggest trends for 2018 and beyond.<\/p>\n\n\n\n

Animations have now become an expectation.<\/p>\n\n\n\n

The positive influence of animation on UX and UI Design is not surprising, due to how humans are visual creatures and will always be attracted to motion and movement. Animations can bring any process to life, turning it into an experience. Movements let users know that something is happening.<\/p>\n\n\n\n

For example, animations inside form cells can notify users that they\u2019ve made a mistake or that there is information missing. Or when inputting a password and it\u2019s wrong, the asterisks can turn red, do a little dance, and disappear.<\/p>\n\n\n\n

\"an<\/a>
Animation from The Kinetic UI<\/a><\/figcaption><\/figure>\n\n\n\n

Or how about this fun login animation? The possibilities of animation in web design is growing every day. Why not add some strategic animations to your site, too?<\/p>\n\n\n\n

\"a
Animation by Darin on Dribbble<\/a><\/figcaption><\/figure>\n\n\n\n

Animating Your Site<\/strong><\/h2>\n\n\n\n

The options on how to add animation to your site are pretty extensive, but that doesn\u2019t mean that it should be riddled with jumping icons and rotating buttons. There needs to be a balance to the amount of animation you include in your design. Think more along the lines of \u201csoft motion\u201d rather than a page that moves so much you don\u2019t know where to look. Overuse of animation is just as painful as excessive minimalism!<\/p>\n\n\n\n

Using a program like Adobe XD can help with the process of trying out different animations to place strategically on your site. If you like building straight into WordPress, then a great option is the Divi Builder<\/a>, which comes with lots of animation possibilities inside every module.<\/p>\n\n\n\n

At the end of the article, I\u2019ve included a few links to some great resources that will help add animations to your site.<\/p>\n\n\n\n

Let\u2019s take a look at the different kinds of animations that can improve your site\u2019s UX and overall visual composition.<\/p>\n\n\n\n

Functional or Aesthetic<\/strong><\/h2>\n\n\n\n

Animations have two uses in web design; functionality and aesthetics.<\/p>\n\n\n\n

Functional Animations<\/h3>\n\n\n\n

Animations can help visitors with their user journey on your site. They bring attention to calls to action or important sections you don\u2019t want them to miss. They make processes easier and are visually pleasing.<\/p>\n\n\n\n

Loading Animations<\/strong><\/h4>\n\n\n\n

The most common functional animation, and one of the first to be commonplace in website design, is the loading animation. These used to be found mainly when a site was first opened, but now that sites load instantly, its used for things like loading videos, progression of downloads, and other processes that your site might have.<\/p>\n\n\n\n

For your loading animation to be effective it needs to match your brand. If your site is fun and colorful, your loading animation can be anything from a bouncing ball to a colorful loop. On the other hand, if your site is serious and formal, then the loading animation should follow that style.<\/p>\n\n\n\n

\"an<\/a>
Animation by Sharon Yar and Dilys Lim on Behance<\/a><\/figcaption><\/figure>\n\n\n\n
\"animation<\/a>
Animation from UXPin<\/a> of Tom Cole Architecture<\/a>\u2019s site<\/figcaption><\/figure>\n\n\n\n

Hovers<\/strong><\/h4>\n\n\n\n

Other common functional animations that you should consider are hovers. We are already quite used to seeing hover animations and most people will expect them. Making a button change color when it\u2019s hovered over is a basic animation that you should definitely consider using, either on your menu or a call to action.<\/p>\n\n\n\n

Other ways of using hovers is for buttons that don\u2019t look like buttons, or if you want to show information on the hover before they click.<\/p>\n\n\n\n

\"animation<\/a>
Animation from Design Shack<\/a><\/figcaption><\/figure>\n\n\n\n

Scrolling<\/strong><\/h4>\n\n\n\n

Websites with scroll effects are not a unique phenomenon anymore. Parallax scrolling has become very popular (and is becoming a bit tiring, to tell the truth). So if you want to use animated scrolling, think outside the box. Include elements that move from section to section, elements that appear progressively with the scroll. Think of functionality as well as aesthetics.<\/p>\n\n\n\n

\"scrolling<\/a>
Animation by Youandigraphics<\/figcaption><\/figure>\n\n\n\n

Aesthetic Animations<\/h3>\n\n\n\n

Aesthetic or decorative animations are those that make a site more visually appealing but don\u2019t necessarily help with the functionality. There is an old metaphor from the era of the first Walt Disney cartoons, that animation is an \u201dillusion of life.\u201d<\/a> What animation does to a static image is bring it to life, make it breathe.<\/p>\n\n\n\n

With the right amount of aesthetic animation, your site can be unforgettable.<\/p>\n\n\n\n

Just like functional animation, decorative animation needs to have a balance. Ask yourself if that animated background is really necessary, or if it properly matches your brand. Does every photo need to animate into the screen or do you need that many pop-ups? Make sure that the animations you add are just enough to make your site nice to look at but not overwhelming.<\/p>\n\n\n\n

Animated Backgrounds<\/strong><\/h4>\n\n\n\n

The trendiest animated backgrounds right now are particle backgrounds, from simple moving dots to complex light effect movements. These can be added as a background for an entire page or just for sections. They can make areas of your site have more personality. Remember that trends change, so if you do use a particle background, make sure it really suits your site.<\/p>\n\n\n\n

\"add<\/a>
Animation by Femme Fatale<\/a><\/figcaption><\/figure>\n\n\n\n

Unlimited Creativity<\/strong><\/h4>\n\n\n\n

Last but not least, what animation can do for your site is offer unlimited creativity. Since you can pretty much animate anything, the creative possibilities are endless. From animated backgrounds to things moving on the screen and even subtle animations like a character blinking.<\/p>\n\n\n\n

A site can rely so heavily on animation that the journey through pages is a true experience. Take the new site for Porsche<\/a>, for example, which shows the history of the car manufacturer through the years.<\/p>\n\n\n\n

Or put together isometric illustration and animated scrolling and you get an amazing site like RollPark<\/a>.<\/p>\n\n\n\n

\"an<\/a>
Animation from Rollpark<\/a><\/figcaption><\/figure>\n\n\n\n

Always Optimize for Mobile!<\/strong><\/h2>\n\n\n\n

It would be unfair for me to not remind you that you should always check your animations on mobile. Make sure they work as they should and make adjustments if not. If you use SVG animations, then you shouldn\u2019t have much of a problem since .svg graphics are infinitely scalable.<\/p>\n\n\n\n

Either way, always checking on mobile and optimizing your animations for all formats will make your site that much better!<\/p>\n\n\n\n

Tools to Help you Animate Your Site<\/strong><\/h2>\n\n\n\n

Here is a list of links to practical articles for different types of animations you can use on your site.<\/p>\n\n\n\n