Animating an app using requestAnimationFrame with event binding

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:

Getting ready

You can test this in a web browser. However, it's recommended that you use a physical...