{"id":19617,"date":"2015-03-09T06:00:07","date_gmt":"2015-03-09T13:00:07","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=19617"},"modified":"2024-04-03T05:38:36","modified_gmt":"2024-04-03T12:38:36","slug":"7-examples-of-subtle-animation-in-design","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/7-examples-of-subtle-animation-in-design","title":{"rendered":"7 Examples of Subtle Animation in Design"},"content":{"rendered":"

At Creative Market, we love it when designers focus on the little details. Lately, we’ve been coming across great subtle animations in everything from our internal tools, to the many templates and themes in our shops. Designers are utilizing animation more frequently to not only create delight, but also a richer user experience. Check out this list of examples we’ve compiled. Enjoy!<\/p>\n

<\/span>Hipstech<\/span><\/h2>\n

Hipstech<\/a><\/p>\n

combines subtle background movement with a clean animation between text headlines.
\n\"animation\"\n<\/p>\n

<\/span>Six Rows<\/span><\/h2>\n

Six Rows<\/a><\/p>\n

 is a minimal app landing page, but rather than simply displaying all the content at once, the main hero unit slowly fades in as it animates from the left and right. This subtle entrance tells the visitor that he or she is about to witness something impressive, an ideal message to send in your product’s landing page.
\n\"animation\"\n<\/p>\n

<\/span>PRISM<\/span><\/h2>\n

PRISM<\/a><\/p>\n

 is a beautiful admin template that utilizes animation to emphasize the data and information that is being visualized.
\n\"animation\"\n<\/p>\n

<\/span>Dragonfly<\/span><\/h2>\n

Dragonfly<\/a><\/p>\n

‘s pricing section is made up of individual cards that imitate more realistic motion. When you hover over the cards, they flip to reveal more details. This animation helps declutter the view for the user and highlights the importance of the product’s price.
\n\"animation\"\n<\/p>\n

<\/span>Pure<\/span><\/h2>\n

Pure<\/a><\/p>\n

 is an awesome portfolio theme that features more whimsical-style animations. Horizontal and vertical movements combine with a bouncy moustache to create visual interest. The menu animation also helps separate the site’s navigation from the rest of the content.
\n\"animation\"\n<\/p>\n

<\/span>Nitteo<\/span><\/h2>\n

Nitteo<\/a><\/p>\n

 is another simple portfolio that uses a subtle animation to display content initially. The animated down arrow hints that there is more to see below.
\n\"animation\"\n<\/p>\n

<\/span>Endless<\/span><\/h2>\n

Endless<\/a><\/p>\n

 is an admin template that uses animated charts and dynamically updates data to display useful information. Milestones are shown with an animated counter to emphasize their importance.
\n\"animation\"\n<\/p>\n

<\/span>Further Reading<\/span><\/h2>\n