Intelligent animation and transition reduction based on device battery level
Battery Saver is a lightweight JavaScript library that automatically optimizes your website's performance by reducing animations, transitions, and other power-consuming visual effects based on the user's battery level. Perfect for improving battery life on mobile devices and laptops.
- 🔋 Automatic Battery Detection - Uses the Battery API to monitor device battery level
- 🎨 Progressive Animation Reduction - Four modes: Normal, Medium, Low, and Critical
- ⚙️ Customizable Thresholds - Configure when different power-saving modes activate
- 💾 Persistent Settings - User preferences saved in localStorage
- 🎯 CSS Utility Classes - Easy integration with existing projects
- 📱 Mobile & Desktop Support - Works across all modern browsers
- ⚡ Zero Dependencies - Pure vanilla JavaScript
- 🔌 Event-Driven - React to battery and mode changes
- 🚀 Easy Integration - Auto-initialize or manual control
<!DOCTYPE html>
<html lang="en" data-battery-saver-auto>
<head>
<link rel="stylesheet" href="battery-saver.css">
</head>
<body>
<!-- Your content -->
<script src="battery-saver.js"></script>
</body>
</html>That's it! Battery Saver will automatically monitor battery levels and adjust animations accordingly.
Open demo.html in your browser to see a live demonstration of all features.
battery-saver/
├── battery-saver.js # Main library (12KB)
├── battery-saver.css # Optimized styles (6KB)
├── demo.html # Interactive demo
├── USAGE.md # Detailed documentation
├── README.md # This file
└── LICENSE # MIT License
Battery Saver monitors your device's battery level and automatically switches between four optimization modes:
- All animations work normally
- Full GPU acceleration
- All effects enabled
- Animations reduced to 0.5s
- Transitions reduced to 0.3s
- Parallax effects disabled
- Animations reduced to 0.2s
- Transitions reduced to 0.15s
- Shadows and blur removed
- Video autoplay disabled
- All animations disabled
- All transitions disabled
- Maximum power saving
<html data-battery-saver-auto>const batterySaver = new BatterySaver({
enabled: true,
thresholds: {
critical: 15,
low: 30,
medium: 50
}
});
// Listen to events
batterySaver.on('modeChange', (data) => {
console.log('Battery mode:', data.currentMode);
});
batterySaver.on('batteryChange', (data) => {
console.log('Battery level:', data.level + '%');
});const batterySaver = new BatterySaver({
thresholds: {
critical: 10, // More aggressive
low: 25,
medium: 60
},
updateInterval: 10000 // Check every 10 seconds
});// Toggle on/off
batterySaver.toggle();
// Enable
batterySaver.enable();
// Disable
batterySaver.disable();
// Check status
if (batterySaver.isEnabled()) {
console.log('Battery Saver is active');
}Battery Saver automatically applies these classes:
/* Applied when battery saving is active */
.battery-saver-active { }
.battery-saver-reduce-shadows { }
.battery-saver-reduce-blur { }
.battery-saver-reduce-gradients { }
.battery-saver-reduce-motion { }<html data-battery-saver-mode="low">:root {
--battery-saver-animation-duration: 1s;
--battery-saver-transition-duration: 0.3s;
}
/* Use in your styles */
.my-animation {
animation-duration: var(--battery-saver-animation-duration);
}<!-- Opt-in to optimizations -->
<div class="battery-saver-enabled">...</div>
<!-- Exclude from battery saver -->
<div class="battery-saver-exclude">...</div>| Method | Description |
|---|---|
init() |
Initialize Battery Saver |
enable() |
Enable battery saving |
disable() |
Disable battery saving |
toggle() |
Toggle on/off |
isEnabled() |
Check if enabled |
getStatus() |
Get current status |
setMode(mode) |
Manually set mode |
updateThresholds(obj) |
Update thresholds |
on(event, callback) |
Add event listener |
off(event, callback) |
Remove event listener |
destroy() |
Clean up instance |
| Event | Description | Data |
|---|---|---|
modeChange |
Fired when mode changes | { previousMode, currentMode, modeConfig } |
batteryChange |
Fired when battery updates | { level, isCharging, mode } |
| Browser | Support | Battery API |
|---|---|---|
| Chrome | ✅ | ✅ 38+ |
| Edge | ✅ | ✅ 79+ |
| Firefox | ✅ | |
| Safari | ✅ | ❌ Graceful fallback |
| Opera | ✅ | ✅ 25+ |
Note: On browsers without Battery API support, the library still works with manual mode control.
- Use GPU-accelerated properties: Prefer
transformandopacity - Provide fallbacks: Design with battery saving in mind
- Test on real devices: Battery behavior varies
- Respect user preferences: Honor
prefers-reduced-motion - Monitor performance: Use DevTools to verify improvements
- USAGE.md - Complete usage guide with examples
- demo.html - Interactive demo
- API Reference - Detailed API documentation
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
We're always looking for ways to improve battery savings! Consider:
- Adaptive Quality: Reduce image quality dynamically
- Lazy Loading: Defer non-critical resources
- Network Optimization: Reduce API calls on low battery
- Video Quality: Lower video resolution automatically
- Background Tasks: Pause background animations
- Service Workers: Cache more aggressively
- WebGL: Reduce polygon count or shader complexity
MIT License - see LICENSE file for details.
- Inspired by the need for better battery life on mobile devices
- Built with web standards and best practices
- Community-driven development
- Issues: GitHub Issues
- Discussions: GitHub Discussions
Made with ⚡ and ❤️ for a greener web