Music is a huge part of my life, and when I think about a music player app that I want to use, I think of one whose interactions are as engaging as the music they’re giving a user access to are. In this case, moving from a “Now Playing” screen to a “Playlist” screen, I’ve added an initial transition animation that quickly eases into a fast downward transition. Once the “Playlist” screen is front and center, the list items appear on screen in an offset opacity/position animation that really emphasizes the “list” nature of this particular area of the application.
This Dream Monitoring/Diary App design has a lot going on in these two screens. As a result, I felt that the various elements should animate on and off in large sections in order to keep the transition time down. In the Dream Diary animate-on, I had the data visualization animate on first and from a new direction (up-down as opposed to right-left as the did in the Explore menu animate-off) in order to create visual interest in the main information element of this new screen the user is moving to.
I wanted to work on the basics with these two animations. What I wanted were crisp, purposeful moves that help users navigate the choices available to them while adding in subtle motion cues that give the sense of interacting with actual physically manipulable objects.