\u201cBest case scenario, the animation influences your users\u2019 perception of your product\u2019s technology, making it seem better than it actually is. Worst case scenario, your users have something fun to watch while they wait, improving the overall experience.\u201d<\/i><\/p>\n
![\"Animation](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image031.gif\")
<\/p>\n
As shown in the above example created with the animation editor in UXPin<\/a>, even short loading animations still add a little sophistication or at least entertainment during the dead time. Loading animations are popular for flat design, minimalism, portfolios, and one-page sites \u2014 all of which are inherently simple.<\/p>\n Photo credit:<\/i> https:\/\/tomcolearchitect.com\/<\/i><\/a><\/p>\n Visiting Tom Cole Architecture<\/a>\u2019s site, the user lands on a black screen and, in a moment, multiple white lines start to move and \u201cwrite\u201d the logo and brand name. After another moment, the background photo comes into view and the user is free to navigate. The site itself is simple and doesn\u2019t necessitate a loading animation. However, these quick opening moments make a clean first impression and entice the user to interact further.<\/p>\n Remember that loading animations are best when simple. Forget extraneous effects like sound or outlandish designs. Animations should match the personality of the site itself, whether fun and cartoony, or professional and elegant.<\/p>\n In order to save screen space, a recent trend is hidden navigation menus that are revealed by clicking on buttons (like the hamburger icon). For these, animation is essential for visually connecting the two elements and preventing a jarring transition.<\/p>\n Click on the circular arrow button in the below prototype created with UXPin<\/a> (tutorial here<\/a>)and an oversized menu box pops out from the left. The \u201cpop out\u201d animation makes the menu appear as if it slides in from offscreen and makes the whole interaction run smoothly.<\/p>\n Hamburger animations aren\u2019t the only option, though \u2014 creative designers are applying navigational elements like sliders and sticky bars to make transitional animations fresh yet familiar.<\/p>\n Hover animations are very practical for conveying that an element is interactive. In some cases, this might be the only sign that a button or piece of text is clickable. When a user is in doubt over how an element functions, they tend to move the mouse over it anyway, making hover animations fairly intuitive.<\/p>\n Photo credit:<\/i> https:\/\/www.niras.com\/<\/i><\/a><\/p>\n Hovering over any card on the Niras site<\/a> above triggers an animation within that card. The animation is small \u2014 the title text slides out and identical text slides in to replace it (and the same happens with the \u201cread more\u201d arrow) \u2014 however it is enough to show the card\u2019s function.<\/p>\n Source:<\/i> UXPin<\/i><\/a><\/p>\n We use this ourselves for our free ebook library<\/a>, where a hover triggers the download image falling from the top and the \u201cget it for free\u201d text rising from the bottom. This serves several functions \u2014 it shows you only need to click the card to initiate the download process, it acts as an attention-grabbing call-to-action, and it creates a snappiness that feels fun.<\/p>\n Animated galleries and slideshows showcase multiple images without distracting the user.<\/p>\n Photo credit:<\/i> https:\/\/www.bigactive.com\/<\/i><\/a><\/p>\n How fast and how many images cycle are up to the designer, but these decisions should not be taken lightly \u2014 even slightly quickening the rate at which images change could give the site an unwanted \u201crushed\u201d feel.<\/p>\n Galleries and slideshows are easy to use because they naturally mimic real-life photo album functionality. However, we wouldn\u2019t advise that you take that metaphor too far with a skeuomorphic<\/a> visual treatment. Minimize the actual design of the slider or gallery, then ensure you show each image for 5-9 seconds.<\/p>\n Any biologist will tell you that the human eye is attracted to motion. This makes animation the perfect tool for controlling your visual hierarchy, especially as part of a site with mostly static images.<\/p>\n Animations are a great way to add intrigue to forms<\/a>, calls-to-action, or even menu items. To see its potential, look at John Iacoviello\u2019s MY\/STATIC\/SELF<\/a>:<\/p>\n Photo credit:<\/i> https:\/\/mystaticself.com\/<\/i><\/a><\/p>\n The cube in the center softly bounces and flickers, clearly the most interesting item on the grayscale screen. Each of the layers of the centerpiece represent a link to the different pages \u2014 the same pages displayed in the top navigation menu. Considering that John Iacoviello is an interactive developer, the game-like design is a great way to show rather than just tell us about his skills.<\/p>\n The clever animation intrigues first time users, while the standard navigation still hangs around in case users prefer a more traditional experience. In this case, the best of both worlds is not out of reach.<\/p>\n The success of a long-scrolling navigation \u2014 another trend discussed in the free e-book Web Design Trends 2015-2016<\/a> \u2014 relies on the quality of its animation. A site simply can\u2019t scroll smoothly without it. One of the main advantages of scrolling is the control it gives to the user, and for that, animation dictates the pace.<\/p>\n Photo credit:<\/i> https:\/\/forbetter.coffee\/<\/i><\/a><\/p>\n The webgraphic site For Better Coffee uses long scrolling to list out advice for making better coffee while simultaneously entertaining the user with an interactive visual journey of a bean being made into coffee (in a pleasing flat design style).<\/p>\n The best part about the site isn\u2019t the coffee advice, it\u2019s watching the animations that bring the bean from one stage to another. As the user who controls the scroll, you feel a part of the process.<\/p>\n Minor page motions, from AJAX loading<\/a> options to simple shakes, add a little something extra to your site\u2019s delightful design. These rarely have any practical benefits, but do well in making the site more enjoyable.<\/p>\n On the site for Hunger Crunch<\/a>, each tiny movement of the mouse shifts the image, and when combined with the separation of layers creates a fun effect.<\/p>\n When applying this captivating tactic, be careful of using too many loading items \u2014 they may cause the site to render slowly.<\/p>\n While distracting if excessive, a modest animated background can add a certain vitality to a website. The key is moderation \u2014 individual sections at a time, or perhaps a gentle movement of the entire image.<\/i><\/p>\n The site for Terna<\/a> maintains the right balance. Choosing an animated background to showcase the urban bustle that\u2019s their business, sections throughout the image move at different intervals. This creates that \u201cbusy\u201d atmosphere without overstimulating the user.<\/p>\n As with other areas of animation, simplicity is advised. Remember that every motion on the screen attracts attention, so too much animation at the same time creates chaos.<\/p>\n By now, animation has proven its staying power in mediums far older than web design. Due to its permanence, it will continue to ingrain itself into the design industry \u2014 the only difference is whatever new opportunities the future technologies will bring.<\/p>\n For more analysis of the web animations \u2014 as well as 9 other current web design trends \u2014 check out the free ebook Web Design Trends 2015-2016<\/a>. You\u2019ll find 166 hand-picked examples from companies like Adidas, Intercom, Apple, Google, Versace, and others. To help speed up the design process, there\u2019s also a curated list of 100 free resources.<\/p>\n![\"Animation](\"https:\/\/i.imgur.com\/bxZ2zx1.gif\")
<\/p>\nJoin the world's best designers who use UXPin.<\/h2>Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n
2. Navigation and Menus (Nonscrolling)<\/h2>\n
![\"Animation](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image09.gif\")
<\/p>\n3. Hover<\/h2>\n
![\"Animation](\"https:\/\/i.imgur.com\/ON2rVUy.gif\")
<\/p>\n![\"Animation](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image08.gif\")
<\/p>\n4. Galleries and Slideshows<\/h2>\n
![\"Animation](\"https:\/\/i.imgur.com\/tan5YfJ.gif\")
<\/p>\n5. Attracting Attention<\/h2>\n
![\"Animation](\"https:\/\/i.imgur.com\/Uk21ss5.gif\")
<\/p>\n6. Scrolling<\/h2>\n
![\"Animation](\"https:\/\/i.imgur.com\/5h6dMHj.gif\")
<\/p>\n7. Page Motion<\/h2>\n
8. Backgrounds<\/h2>\n
Takeaway<\/h2>\n