PageTransformer has a "snap" effect when animating height

Question

I have a ViewPager that uses PageTransformer . I use PageTransformer to animate the height of the maps inside my ViewPager whenever I scroll. Here is the code:

 mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() { @Override public void transformPage(View page, float position) { View card = ((ViewGroup)page).getChildAt(0); CardView cardView = (CardView) card; float absoluteValue = Math.abs(position); if (absoluteValue < 1.3f) { float scale = 1.3f - absoluteValue; float scaleElevation = scale * 10f; cardView.setCardElevation(scaleElevation); //cardView.setElevation(scaleElevation); Log.d(TAG, "scaleElevation: " + scaleElevation + ", position: " + position); } } }); 

Pretty simple. Now, when scrolling occurs, the height is "animated" using a specific zoom factor and scroll position. But what happens when you finish scrolling to a new page, there is some kind of “snap” effect with shadows.

Here is a video that clearly shows the problem: https://gfycat.com/FlakyWarlikeEgg

So what is going on here and what will be the correction?