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
Critical Insight
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.
