Brilliant User Interface Animations

Animated interface elements reveal the process and functionality of a UI much better than static text. They enhance user experience and help guide user flow. Like any other element of good design, UI animations should have a purpose. They should be functional without being overly flashy.

 Note  If you’re on a slow connection, give a few seconds for the GIFs to load.

1. Menu open / tick / close

Menu open / tick / close
By Kreativa Studio

2. Download / save

Download / save
By Warren Lebovics

3. Play / pause

Play / pause
By Kreativa Studio

4. Search bar

Search bar
By Sandeep Virk

5. Menu open / close

Menu open / close
By Thanks But No Thanks

6. Responsive icons

Responsive icons
By Joe Harrison

7. Sound on / off

Sound on / off
By Kreativa Studio

8. Sending mail

Sending mail
By Tamas Kojo

9. Menu open / close

Menu open / close
By Creativedash

10. Favourite

By Brian Waddington

11. Recording Audio

Recording Audio
By Ryan McLaughlin

12. Cloud download / done

Cloud download / done
By Brandon Termini

13. Menu open / close

Menu open / close
By Tamas Kojo

14. Responsive design

Responsive design
By Karol Podleśny

15. New Message

New Message
By Davor Moucka

16. Pull down / refresh

Pull down / refresh
By Hoang Nguyen

17. Menu open / close

Menu open / close
By Kenny Sing

18. Refresh

By Sandeep Virk

19. Save

By Justin Nurse

20. Search / back

Search / back
By Rahul Bhosale

21. Menu / more / close / back

Menu / more / close / back
By Alex Kirhenstein | Draward

22. Back / close

Back / close
By Sandeep Virk

23. Upload / complete

Upload / complete
By Colin Garven

24. Attaching file

Attaching file
By Roman Bulah

25. Dotted menu open / close

Dotted menu open / close
By Warren Lebovics

26. Message sent

Message sent
By Mike DiLuigi

27. New mail

New mail
By Dominik Levitsky

28. Shortlist

By Rahul Bhosale

29. Menu open / close

Menu open / close
By Homeliuwei

30. Music app intro animations

Music app intro animations
By Sergey Valiukh

31. Search / loading

Search / loading
By Sandeep Virk

32. Radial menu

Radial menu
By Howard Moen

33. EatStreet loading animation

EatStreet loading animation
By Jeremy Martinez

34. Firefox logo

Firefox logo
By Latham Arnott

35. In-app animations

In-app animations
By Sergey Valiukh

36. Weather icons

Weather icons
By Mark Geyer


Our favourites: no. 7, 18 and 32. What about you? Share this post with a fellow designer and voice your views in the comments below.


REM Calculator!

/*global jQuery */
(function( $ ) {
var result = $(‘#result’);
var base = $(‘#base’);
var list = $(‘#list’);
$(‘#calc’).click(function() {
var baseVal = base.val();
var px = list.val().split(‘,’);
var html = [];
$.each(px, function(i, v) {
var px = parseInt(v);
var rem = parseFloat((px / parseInt(baseVal, 10)).toPrecision(4));
var isBase = (rem === 1) ? ‘ <i>(base)</i>’ : ”;
html.push(‘<li>’ + v + ‘px = ‘ + rem + ‘rem’ + isBase + ‘</li>’);


REM Calculator!

What’s the difference between UX and UI design?

Let’s start!

First off, let’s answer the question: What exactly are UI design and UX design, and what is the difference between the two?


Simply put, UI is how things look, UX is how things work. UX is a process, while UI is a deliverable. Let’s elaborate further…

User Interface Design

UI is a combination of content (documents, texts, images, videos, etc), form (buttons, labels, text fields, check boxes, drop-down lists, graphic design, etc), and behavior (what happens if I click/drag/type).

It takes a good eye, a lot of practice, and a lot of trial and error to get better at it. As a UI designer, your goal is to create a user interface that is engaging, beautiful, and also creates an emotional response from the user to make your products more lovable and beautiful.


User Experience Design

User Experience (UX) design is about creating pain-free and enjoyable experiences.

Here are 7 questions to ask yourself to know if the UX of your product is good:

  • Usability
  • User Profiling
  • Asking for permissions
  • Form vs Function
  • Consistency
  • Simplicity
  • Don’t make me think

“Design is not just what it looks like and feels like. Design is how it works”
-Steve Jobs

Good to great UI animation tips

Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation.uianimation

The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon.


UI animation tips

Brilliant Slider Animations For UI Inspiration

Sliders are the most commonly-used UI element, after buttons. From lock screens and image galleries to volume controls and app selections, we use sliders to navigate our way through different interfaces everyday. An effectively implemented slider enhances the user experience and makes the interface more engaging, dynamic, and memorable.

 Note  If you’re on a slow connection, give a few seconds for the GIFs to load.


Slider Animation Inspiration - 1
By Gal Shir



Slider Animation Inspiration - 2
By Matthew Kissick



Slider Animation Inspiration - 3
By Saptarshi Prakash



Slider Animation Inspiration - 4
By Saptarshi Prakash



Slider Animation Inspiration - 5



Slider Animation Inspiration - 6
By Tylko



Slider Animation Inspiration - 7
By Nick Buturishvili



Slider Animation Inspiration - 8
By Alex Pronsky



Slider Animation Inspiration - 9
By UI8



Slider Animation Inspiration - 10
By Karol Ortyl



Slider Animation Inspiration - 11



Slider Animation Inspiration - 12



Slider Animation Inspiration - 13
By Yury Smirnov



Slider Animation Inspiration - 14
By Benjamin den Boer



Slider Animation Inspiration - 15
By Johny vino™



Slider Animation Inspiration - 16
By Budi Tanrim



Slider Animation Inspiration - 17
By Logan Cee



Slider Animation Inspiration - 18
By Stan Yakusevich



Slider Animation Inspiration - 19
By Yaroslav Zubko



Slider Animation Inspiration - 20
By Floris van der Harst



Slider Animation Inspiration - 21
By Nikonov Dmitry



Slider Animation Inspiration - 22
By Jurre Houtkamp



Slider Animation Inspiration - 23
By Divan Raj



Slider Animation Inspiration - 24
By Aurélien Salomon



Slider Animation Inspiration - 25
By Andrew J Lee



Slider Animation Inspiration - 26
By Olga Mikhailenko



Slider Animation Inspiration - 27
By Cynthia_yue



Slider Animation Inspiration - 28
By pixbugius



Slider Animation Inspiration - 29
By k3nnyart


Why Google’s “Smart Reply” Is So Annoying



I opened my Gmail account this morning and my emails started writing themselves. As I typed just a few words the next words appeared before I even thought of them. The screen told me I could hit tab and there they would be, like graven type, ready to send. That they weren’t the right words at all didn’t seem to matter — it was mind-reading magic! Shitty, annoying magic. I turned off Google’s auto-suggestions as soon as I could. (Apparently some people have had this feature for a while, but the plague just hit my inbox.)

“Smart Reply”

Blog at

Up ↑