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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.