Animating the Mobile Web
Article Summary
Zain M., Engineering Intern at Yelp, turned a choppy mobile web animation into a buttery-smooth 60fps experience. The secret? Ditching the obvious CSS properties and rethinking how browsers handle rendering.
Yelp's engineering team wanted to replicate their native app's photo pull-down animation on mobile web. The challenge: achieving 60fps performance (16ms frame budget) while animating multiple CSS properties based on touch gestures.
Key Takeaways
- Initial approach using margin-top and height/width blew past the 16ms frame budget
- Switched to GPU-accelerated transform and translateY properties for better performance
- Used requestAnimationFrame to sync with browser refresh instead of every touch event
- Built custom DomTweenable and Timeline classes on top of Shifty tweening engine
- Final result: smooth animation staying under 60fps target
By replacing expensive CSS properties with GPU-accelerated transforms and syncing animations to browser refresh cycles, Yelp achieved native-like mobile web animations within their 16ms frame budget.
About This Article
Zain M. found that animating margin-top, height, and width properties couldn't run on the GPU. The browser renderer had too many rendering tasks to handle, which caused frames to drop during the pull-down animation.
The team moved DOM elements to their own GPU layers with transform:translateZ(0). They replaced the expensive CSS properties with transform: translateY() and transform: scale() instead, since the GPU could process these efficiently.
Chrome's profiling tool showed the final animation stayed under 60fps consistently. The dropped frames that appeared in the initial performance screenshot, which had gone over the 16ms frame budget, were gone.