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

Today’s post showcases 36 slick UI elements with smooth, creative transitions that are a joy to watch. A lot of work goes into these split-second animations and their detailing and ‘bounce’ is commendable. Check them out below.

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

1. Menu open / tick / close

2. Download / save

3. Play / pause

4. Search bar

5. Menu open / close

6. Responsive icons

7. Sound on / off

8. Sending mail

9. Menu open / close

10. Favourite

11. Recording Audio

12. Cloud download / done

13. Menu open / close

14. Responsive design

15. New Message

16. Pull down / refresh

17. Menu open / close

18. Refresh

19. Save

20. Search / back

21. Menu / more / close / back

22. Back / close

23. Upload / complete

24. Attaching file

25. Dotted menu open / close

26. Message sent

27. New mail

28. Shortlist

29. Menu open / close

30. Music app intro animations

31. Search / loading

32. Radial menu

33. EatStreet loading animation

34. Firefox logo

35. In-app animations

36. Weather icons

SEE MORE …

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.