diff --git a/apps.json b/apps.json
index 7fe259899..80a11630c 100644
--- a/apps.json
+++ b/apps.json
@@ -768,11 +768,11 @@
   {
     "id": "chargeanim",
     "name": "Charge Animation",
-    "version": "0.01",
+    "version": "0.02",
     "description": "When charging, show a sideways charging animation and keep the screen on. When removed from the charger load the clock again.",
     "icon": "icon.png",
     "tags": "battery",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS", "BANGLEJS2"],
     "allow_emulator": true,
     "storage": [
       {"name":"chargeanim.app.js","url":"app.js"},
diff --git a/apps/chargeanim/ChangeLog b/apps/chargeanim/ChangeLog
index 5560f00bc..a7262b0c9 100644
--- a/apps/chargeanim/ChangeLog
+++ b/apps/chargeanim/ChangeLog
@@ -1 +1,2 @@
 0.01: New App!
+0.02: Bangle.js 2 compatibility
diff --git a/apps/chargeanim/app.js b/apps/chargeanim/app.js
index c2702337a..68d0cdff5 100644
--- a/apps/chargeanim/app.js
+++ b/apps/chargeanim/app.js
@@ -1,8 +1,12 @@
+g.setBgColor(0, 0, 0);
 g.clear().flip();
-var imgbat = require("heatshrink").decompress(atob("nlWhH+AH4A/AH4AHwoAQHXQ8pHf47rF6YAXHXQ8OHVo8NHf47/Hf47/Hf47/Hf47/Hf47/Hf47r1I766Y756Z351I766ayTHco6BHfCxBHfI6CdyY7jHQQ73WIayUHcQ6DHew6EHeqxEdyo7gOwo70HQqyVHbyxFHeo6GHeY6Hdyo7cWI47zHQ6yWHbY6IHeKxIABa9MHbI6TQJo7YHUI7YWMKzbQKQYOHdYYPHcK9IWJw7sDKA7hHTA7pWKA7qDKQ7gdwwaTHcyxSHcR2ZHcwZUHcqxUHcLuEHSo7kHSw7gWLI7kHS47iHTA7fdwKxYHcQ6ZHb46bO8A76ADg7/Hf47/Hf47/Hf47/Hf47/Hf47/HbY8uHRg8tHRwA/AH4AsA=="));
-var imgbubble = require("heatshrink").decompress(atob("ikQhH+AAc0AAgKEAAwRFCpgMDnVerwULCIuCCYoUGCQQQBnQ9MA4Q3GChI5DEpATIJYISKCY46LCYwANCa4UObJ7INeCoSOCpAOI"));
+var imgbat = require("heatshrink").decompress(atob("nFYhBC/AH4A/AGUeACA22HEo3/G8YrTAC422HBQ2tHBI3/G/43/G/43/G/43/G/43/G/43/G+fTG+vSN+w326Q31GwI3/G9g2WG742CG/43rGwY3yGwg33RKo3bNzQ3bGwo3/G9A2GG942dG/43QGw43uGxA34IKw3VGyY3iG0I3pb8pBRG+wYPG8wYQG/42uG8oZSG/43bDKY3iDKg3cNzI3iRKo3gGyo3/G7A2WG7g2aG/43WGzA3dGzI3/G6fTGzRvcG/43/G/43/G/43/G/43/G/43/G/437HFw2IHFo2KAH4A/AH4Aa"));
+var imgbubble = require("heatshrink").decompress(atob("i0UhAebgoAFCaYXNBocjAAIWNCYoVHCw4UFIZwqELJQWFKZQVOChYVzABwVaCx7wKCqIWNCg4WMChIXJCZgAnA=="));
 
- var W=240,H=240;
+var W=g.getWidth(),H=g.getHeight();
+var b2v = (W != 240)?-1:1;
+var b2rot = (W != 240)?Math.PI:0;
+var b2scale = W/240.0;
 var bubbles = [];
 for (var i=0;i<10;i++) {
   bubbles.push({y:Math.random()*H,ly:0,x:(0.5+(i<5?i:i+8))*W/18,v:0.6+Math.random(),s:0.5+Math.random()});
@@ -12,12 +16,16 @@ function anim() {
   /* we don't use any kind of buffering here. Just draw one image
   at a time (image contains a background) too, and there is minimal
   flicker. */  
-  var mx = 120, my = 120;
+  var mx = W/2.0, my = H/2.0;
   bubbles.forEach(f=>{
-    f.y-=f.v;if (f.y<-24) f.y=H+8;
-    g.drawImage(imgbubble,f.y,f.x,{scale:f.s});
+    f.y-=f.v * b2v;
+    if (f.y<-24)
+      f.y=H+8;
+    else if (f.y > (H+8))
+      f.y=0;
+    g.drawImage(imgbubble,f.y,f.x,{scale:f.s * b2scale, rotate:b2rot});
   });
-  g.drawImage(imgbat, mx,my,{rotate:Math.sin(getTime()*2)*0.5-Math.PI/2});
+  g.drawImage(imgbat, mx,my,{scale:b2scale, rotate:Math.sin(getTime()*2)*0.5-Math.PI/2 + b2rot});
   g.flip();
 }