Beautiful Full-Screen Image Parallax Swipes in Android

This is another nontrivial, subtle effect from an abandoned side project called SF-Motion. Two years back I became obsessed with beautiful cinemagraphs such as those produced by Ann Street Studio. I even went out and made some of my own. And I started working on this parallax effect in the hopes of making a marketplace app that allows photographers to sell cinemagraphs that could be used as live wallpapers.

The parallax effect was inspired by the Yahoo Weather app and an older version of the LinkedIn android app’s onboarding. Quite a few people at the time had taken stabs at mocking the parallax effect employed on both apps but missed out on a key requirement. What makes the transition feel seamless is the fact that the center point of each image remains at the center of its allocated width on the screen. If 0 reflects the leftmost pixel of the screen and 1 reflects the rightmost pixels, and image A is allocated width [0, 0.25] and image B is allocated width [0.25, 1], then the center point of image A should be at x=0.125 and the center point of image B should be at x=0.125. This is exactly what the below transformer class — made to be used with ViewPager — does:

Leave a Reply

Your email address will not be published. Required fields are marked *