Tutorials ▶ UI ▶ Animation

Workcation App

Welcome to the first of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.

As we can see in the animation, there is a lot of going on:

  1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
  2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
  3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
  4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.

Full article