ssgoi 2.5.2: Mobile Animation Optimization Complete π
Hello, I'm the maintainer of ssgoi.
Today we released ssgoi 2.5.2. The core focus of this version is mobile environment optimization.
Why Rebuild?
Previously, we relied on an external library for animation implementation. It was a choice made for rapid development.
But user feedback started coming in:
- "It feels janky on mobile"
- "It breaks when I switch apps and come back"
- "It stutters on Galaxy devices"
The library we were using (an older version) didn't account for variable FPS at all.
"Let's build it ourselves."
How We Built It
Step 1: Study Good Code
We dissected GSAP's (20k stars) Ticker implementation:
- Delta Time Clamping
- Lag Smoothing
- Adaptive Frame Rate
We analyzed Svelte Motion's spring implementation:
- Semi-Implicit Euler
- Allen Chou's normalization technique
We also referenced React Native Reanimated's native optimizations.
Step 2: Implement Core Optimizations
Semi-Implicit Euler
// Velocity first, position later (order matters!)
velocity += -2*dt*ΞΆ*Ο*velocity + dt*ΟΒ²*(target - position);
position += dt*velocity;
Variable FPS Defense Code
// 1. Clamp dt
dt = Math.min(dt, 0.1);
// 2. Handle background return
if (elapsed > 500) {
startTime += elapsed - 33;
}
RAF Optimization
// Singleton pattern - call RAF only once
ticker.subscribe(animation.update);
Step 3: Real Device Testing
- iPhone 13, 14 Pro
- Galaxy S21, S23
- Low-end Android (Galaxy A12)
Confirmed stable operation on all devices β
It will be automatically applied when you update.
Detailed Technical Documentation
Optimization process and numerical analysis theory: https://velog.io/@k-svelte-master/optimize-anaimtion-performance-in-mobile
Closing Thoughts
Lessons learned from running an open-source library:
- User feedback is most important
- You need to read a lot of good code
- Small optimizations add up to make a big difference
Thanks to your feedback, we've built a better library. Thank you! π
Github: https://github.com/meursyphus/ssgoi NPM: https://www.npmjs.com/package/ssgoi