7 Examples of Subtle Animation in Design

By on May 2, 2016 in Community
7 Examples of Subtle Animation in Design

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!

Hipstech

Hipstech combines subtle background movement with a clean animation between text headlines.

animationSave

Six Rows

Six Rows 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.

animationSave

PRISM

PRISM is a beautiful admin template that utilizes animation to emphasize the data and information that is being visualized.

animationSave

Dragonfly

Dragonfly'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.

animationSave

Pure

Pure 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.

animationSave

Nitteo

Nitteo 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.

animationSave

Endless

Endless 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.

animationSave

Further Reading

  • Pasquale D'Silva wrote a pretty cool Medium post about transitional interfaces, where he talks about using animation functionally in addition to just adding delight. Check it out on Medium.
  • Mark Coleran's showreel has some really great examples to pull inspiration from. Even though this video is over 6 years old, it is still incredibly relevant. Watch it on Vimeo.
  • Google recently announced a new internal design language, dubbed Material Design, that incorporates plenty of motion and subtle animation. Learn about it on Google Design.
  • Stripe has a great animated walk-through of their Checkout flow that quickly explains how it works. Go to Stripe Checkout.
  • Codrops is a design/development blog with a ton of great resources and tutorials that often utilize animation and transitions. Checkout the Codrops Playground.
  • Clear is an iPhone task management app that really inspired a new era of interaction and simplicity. It utilizes gestures and animation to create a simple and beautiful experience. Learn about Clear
  • For more examples of animations and transitions, check out these galleries: SIX UX Transitions, Hover States, CAPPTIVATE.

Animate all the things!

We hope these examples will provide a bit of inspiration that you can pull from in your own work. Have anything you'd like to share? Please do! We'd love to see work you've done, as well as other things that inspire you. Now get to the animating!

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

2 Comments

  1. FilterGrade

    Six Rows does a great job. Subtle animation makes websites, apps, and design projects so much more interactive. One amazing example is the Twitter favorite animation. Seems that it increased favorites purely to see that animation. :)

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →