Animation is always a tricky part when it comes to mobile app development. The main reason behind this is that you really have to know how JavaScript or CSS animation works. Otherwise, if you use external libraries, you will run into performance problems such as jerky movements. In addition to this, there are many ways that can be used to bind an animation stage with a native touch event of the device. So, it always takes a little extra effort to get a good result.
In this recipe, you will learn how to:
Detect a scroll event
Bind the scroll position on pull down in order to slightly zoom the image
The image zoom has exact ration is the scroll bounce
This example is similar to many apps with a profile page such as a Twitter iOS app. The top image can be the user's profile picture. The following is a screenshot of the app that you will build:
