My web application has a zoom feature that scales some absolutely positioned DIVs while keeping the scroll position intact. However, during the animated zooming, there is a noticeable flickering effect where the boxes seem to jump up and down slightly. I am looking for a solution to make this animation smoother.
If you want to see the issue in action, you can visit this link: http://codepen.io/excelkobayashi/pen/EKVmrK. The flickering becomes more pronounced as you scroll further down on the page. In my actual application, the problem is even more evident due to the complex nature of the DOM.
Pay attention to the top edge and the text:
https://i.sstatic.net/85PTP.gif
Here is the relevant code snippet responsible for handling scrolling:
var oldZoom = zoom;
zoom += step;
render();
scrollPos = ((zoom / oldZoom) * scrollPos) || 0;
$("#container").scrollTop(scrollPos);
Key points to note:
- This entire block is executed within a requestAnimationFrame loop to animate the change in zoom level
- 'Step' represents a fraction of difference between the current zoom level and the target zoom level, creating an ease-out effect
- The 'render' function handles resizing and moving the DIVs inside the scrollable area