How to Achieve Stable 60 FPS in Mobile Animations
We often see that 60 FPS means 16.67 ms per frame. If any frame takes more than 17 ms, Instruments will show a dropped frame. On 120 Hz displays (ProMotion), the threshold is even tighter: 8.3 ms. Users of iPhone 13 Pro and Pixel 8 physically feel this. Our task is to stay within this limit under any scenario.
Why Animation Stutters on Real Devices
Before optimization, open Xcode Instruments with the Core Animation template. Run on a real device (the simulator doesn't count: it has a different GPU). Watch two graphs: FPS and CPU Usage. Red bars on the FPS graph indicate dropped frames.
On Android, use Android Profiler in GPU/CPU mode plus Systrace for detailed tracing. In Developer Options, enable Profile GPU Rendering (displays bars on screen): if the orange zone (Draw) and red zone (Sync/Upload) regularly exceed the 16ms line, there's a problem.
A typical finding: animating shadow properties (shadowRadius, shadowOffset on CALayer) recalculates Gaussian blur on the CPU every frame. On an iPhone SE 2nd gen, this can take 8–10 ms just for the shadow.
The Main Principle: GPU Layers vs. CPU Rendering
Animating only transform and opacity is not a recommendation—it's a law of performance. These properties are processed directly by the Compositor thread without main thread involvement and without calling drawRect:.
Everything else triggers the Layout → Display → Prepare → Commit cycle:
| Property | Rendered On | Dropped frames |
|---|---|---|
transform, opacity |
GPU Compositor | No |
backgroundColor |
GPU (CALayer) | Rarely |
bounds, frame |
CPU → GPU | Often |
cornerRadius + masksToBounds |
CPU (offscreen) | Often |
shadowPath (static) |
GPU | No |
shadowRadius (dynamic) |
CPU | Very often |
cornerRadius with masksToBounds = true causes offscreen rendering. For each such layer, Core Animation performs an additional render pass. In Instruments: Debug → Color Offscreen-Rendered highlights them yellow. Fix: set layer.shadowPath statically or use a vector image mask.
How to Identify Problematic Animations: UIKit
shouldRasterize — Use With Caution
layer.shouldRasterize = true caches the layer as a bitmap. It helps if content doesn't change. It kills performance if it does: the cache is invalidated every frame and redrawing becomes more expensive than without it. Check via Instruments → Color Hits Green and Misses Red: red means invalidation, no help.
drawRect vs. CALayer
Overriding drawRect: is a nuclear option. If it's called during animation (e.g., bounds change), the main thread is busy drawing. Alternative: put static content in a separate CALayer with contents = image.cgImage, animate only transform.
CADisplayLink for Custom Animations
If writing custom animations with CADisplayLink, tie it to preferredFramesPerSecond:
let displayLink = CADisplayLink(target: self, selector: #selector(tick))
displayLink.preferredFrameRateRange = CAFrameRateRange(
minimum: 60,
maximum: 120,
preferred: 120
)
displayLink.add(to: .main, forMode: .common)
On ProMotion devices, this allows animations to run at 120 FPS. Without specifying the range, the system might lock to 60 even on a 120 Hz display.
Lottie: Common Performance Issues
Lottie defaults to .automatic render mode. On complex animations with masks and trim paths, this often means CPU rendering. Force switch:
animationView.renderingEngine = .coreAnimation
The Core Animation engine renders via CALayers without main thread participation. Limitation: some complex effects (gradients via trim paths, certain blending modes) are not supported. Check with Lottie Diagnostics.
More about working with Lottie
To reduce load, we recommend replacing complex masks with simple shapes or using vector graphics.Compose: Recommendations
Use Modifier.graphicsLayer instead of directly changing layout parameters:
// Bad: triggers relayout every frame
Box(modifier = Modifier.size(animatedSize))
// Good: only GPU transform, layout stable
Box(modifier = Modifier
.size(100.dp)
.graphicsLayer { scaleX = animatedScale; scaleY = animatedScale }
)
graphicsLayer works similarly to layer.transform in UIKit—outside the layout pass.
Avoid using remember { mutableStateOf() } inside animation lambdas. Every state update via mutableStateOf triggers recomposition. Use Animatable directly, or animateFloatAsState which updates only the graphicsLayer without recomposing the screen.
Typical Optimization Cases from Our Practice
In a client's app, a list with custom cells dropped to 40 FPS during scrolling. Cause: each cell had layer.cornerRadius = 12 with masksToBounds = true and layer.shadowRadius = 8. Double offscreen render pass per cell. Solution: corner radius via UIBezierPath mask (single GPU pass), shadow via shadowPath with a precomputed CGPath. FPS returned to a stable 60. We guarantee similar results when working with your project.
Performance Comparison: UIKit vs. Compose
| Technology | Typical FPS Drop | Main Thread Load | Recommendation |
|---|---|---|---|
| UIKit with transform/opacity | 0–2% | Low | Animate only these properties |
| UIKit with bounds/corner | 10–20% | High | Replace with GPU layers |
| Compose with graphicsLayer | 0–5% | Low | Use graphicsLayer |
| Compose with mutableStateOf | 5–15% | Medium | Use Animatable |
Optimization Process
- Profile with Instruments / Android Profiler on real devices (at least one slow device from the target audience).
- Identify offscreen rendering, expensive draw calls, CPU animations.
- Fix one by one, measuring after each change.
- Regression test on devices of different tiers.
What the Work Includes
- Detailed audit of current animations with a report.
- Fix problematic areas (replace properties, optimize layers).
- Remeasure FPS on control devices.
- Recommendations for further development.
We have been in mobile development for over 7 years and have optimized animations in 20+ projects. Our specialists are certified by Apple and Google. Apple Core Animation Programming Guide and Android Profiler are our primary tools.
Contact us to request an audit or optimization of your application. Get a consultation on specific issues—we will evaluate your project in one day.