diff --git a/apps/clock_info/lib.js b/apps/clock_info/lib.js
index b58e730893..32ff187baf 100644
--- a/apps/clock_info/lib.js
+++ b/apps/clock_info/lib.js
@@ -323,12 +323,15 @@ exports.addInteractive = function(menu, options) {
   const blur = () => {
     options.focus=false;
     Bangle.CLKINFO_FOCUS--;
+    // if (Bangle.CLKINFO_FOCUS < 0) Bangle.CLKINFO_FOCUS = 0;
     const itm = menu[options.menuA].items[options.menuB];
     let redraw = true;
     if (itm.blur && itm.blur(options) === false)
       redraw = false;
     if (redraw) options.redraw();
   };
+  // better to only call blur when we know it's focused. Maybe we can rename force_blur to ensure_blur.
+  options.force_blur = blur;
   const focus = () => {
     let redraw = true;
     Bangle.CLKINFO_FOCUS = (0 | Bangle.CLKINFO_FOCUS) + 1;
diff --git a/apps/widclkinfo/widget.js b/apps/widclkinfo/widget.js
index d51f0563fb..3fece174c2 100644
--- a/apps/widclkinfo/widget.js
+++ b/apps/widclkinfo/widget.js
@@ -1,50 +1,101 @@
-if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
-  // Load the clock infos
-  let clockInfoItems = require("clock_info").load();
-  // Add the
-  let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
-    app : "widclkinfo",
-    // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
-    x : 0, y: 0, w: 72, h:24,
-    // You can add other information here you want to be passed into 'options' in 'draw'
-    // This function draws the info
-    draw : (itm, info, options) => {
-      // itm: the item containing name/hasRange/etc
-      // info: data returned from itm.get() containing text/img/etc
-      // options: options passed into addInteractive
-      clockInfoInfo = info;
-      if (WIDGETS["clkinfo"])
-        WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
-    }
-  });
-  let clockInfoInfo; // when clockInfoMenu.draw is called we set this up
+(() => {
+  if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
+  //WIDGETS = {};
+  const clock_info = require("clock_info");
 
-  // The actual widget we're displaying
   WIDGETS["clkinfo"] = {
-    area:"tl",
-    width: clockInfoMenu.w,
-    draw:function(e) {
-      clockInfoMenu.x = e.x;
-      clockInfoMenu.y = e.y;
-      var o = clockInfoMenu;
-      // Clear the background
+    area: "tl",
+    width: 0, //this.clockInfoMenu.w,
+    init: function() {
+      this.width = this.clockInfoMenu.w;
+      delete this.init;
+      return this;
+    },
+    clockInfoInfo: undefined, // defined during clockInfoMenu.draw()
+    clockInfoMenu: clock_info.addInteractive(clock_info.load(), {
+      app: "widclkinfo",
+      // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
+      x: 0,
+      y: 0, // TODO how know if offscreen to start?
+      w: 72,
+      h: 24,
+      // You can add other information here you want to be passed into 'options' in 'draw'
+      // This function draws the info
+      draw: (itm, info, options) => {
+        // itm: the item containing name/hasRange/etc
+        // info: data returned from itm.get() containing text/img/etc
+        // options: options passed into addInteractive
+        var wi = WIDGETS["clkinfo"];
+        wi.clockInfoInfo = info;
+        wi.clockInfoMenu.y = options.y;
+        if (WIDGETS["clkinfo"] && wi.clockInfoMenu.y > -24) {
+          WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+        }
+      }
+    }),
+    draw: function(e) {
+      this.clockInfoMenu.x = e.x;
+      var o = this.clockInfoMenu;
       g.reset();
-      // indicate focus - make background reddish
-      //if (clockInfoMenu.focus) g.setBgColor(g.blendColor(g.theme.bg, "#f00", 0.25));
-      if (clockInfoMenu.focus) g.setColor("#f00");
-      g.clearRect(o.x, o.y, o.x+o.w-1, o.y+o.h-1);
-      if (clockInfoInfo) {
+      // indicate focus
+      if (this.clockInfoMenu.focus) {
+        g.setColor("#f00");
+      }
+      g.clearRect(o.x, o.y, o.x + o.w - 1, o.y + o.h - 1);
+      if (this.clockInfoInfo) {
         var x = o.x;
-        if (clockInfoInfo.img) {
-          g.drawImage(clockInfoInfo.img, x,o.y); // draw the image
-          x+=24;
+        if (this.clockInfoInfo.img) {
+          g.drawImage(this.clockInfoInfo.img, x, o.y); // draw the image
+          x += 24;
         }
-        var availableWidth = o.x+clockInfoMenu.w - (x+2);
-        g.setFont("6x8:2").setFontAlign(-1,0);
-        if (g.stringWidth(clockInfoInfo.text) > availableWidth)
+        var availableWidth = o.x + this.clockInfoMenu.w - (x + 2);
+        g.setFont("6x8:2").setFontAlign(-1, 0);
+        if (g.stringWidth(this.clockInfoInfo.text) > availableWidth)
           g.setFont("6x8:1x2");
-        g.drawString(clockInfoInfo.text, x+2,o.y+12); // draw the text
+        g.drawString(this.clockInfoInfo.text, x + 2, o.y + 12); // draw the text
       }
     }
-  };
-}
\ No newline at end of file
+  }.init();
+
+  Bangle.on("widgets-start-show", () => {
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      wi.clockInfoMenu.y = 0;
+      wi.draw(wi);
+    }
+  });
+
+  Bangle.on("widgets-shown", () => {
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      wi.clockInfoMenu.y = 0;
+      wi.draw(wi);
+    }
+  });
+
+  Bangle.on("widgets-start-hide", () => {
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      if (wi.clockInfoMenu.focus) wi.clockInfoMenu.blur();
+      wi.clockInfoMenu.y = -24;
+      wi.draw(wi);
+    }
+  });
+
+  Bangle.on("widgets-hidden", () => {
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      if (wi.clockInfoMenu.focus) wi.clockInfoMenu.blur();
+      wi.clockInfoMenu.y = -24;
+      wi.draw(wi);
+    }
+  });
+}})()
+
+/*
+const widget_utils = require("widget_utils");
+g.clear();
+Bangle.loadWidgets();
+widget_utils.swipeOn();
+Bangle.drawWidgets();
+*/
diff --git a/modules/widget_utils.js b/modules/widget_utils.js
index 376c2ceba1..6d38d60417 100644
--- a/modules/widget_utils.js
+++ b/modules/widget_utils.js
@@ -11,6 +11,7 @@ exports.hide = function() {
     w.area = "";
     if (w.x!=undefined) g.clearRect(w.x,w.y,w.x+w.width-1,w.y+23);
   }
+  Bangle.emit("widgets-hidden");
 };
 
 /// Show any hidden widgets
@@ -25,6 +26,7 @@ exports.show = function() {
     delete w._area;
     w.draw(w);
   }
+  Bangle.emit("widgets-shown");
 };
 
 /// Remove anything not needed if the overlay was removed
@@ -131,12 +133,31 @@ exports.swipeOn = function(autohide) {
     exports.animInterval = setInterval(function() {
       exports.offset += dir;
       let stop = false;
-      if (dir>0 && exports.offset>=0) { // fully down
-        stop = true;
-        exports.offset = 0;
-      } else if (dir<0 && exports.offset<-23) { // fully up
-        stop = true;
-        exports.offset = -24;
+      // exports.offset >=0              <0                     <-23
+      //     dir >0     shown, so stop.  in process of showing  start show
+      //         <0     start hide       in process of hiding   hidden, so stop
+      if (dir > 0) {
+        if (exports.offset >= 0) {
+          stop = true;
+          exports.offset = 0;
+          Bangle.emit("widgets-shown");
+        } else if (exports.offset <= -23) {
+          Bangle.emit("widgets-start-show");
+        } else {
+          Bangle.emit("widget-anim-step");
+        }
+      } else if (dir < 0) {
+        if (exports.offset >= 0) {
+          Bangle.emit("widget-start-hide");
+        } else if (exports.offset <= -23) {
+          stop = true;
+          exports.offset = -24;
+          Bangle.emit("widgets-hidden");
+        } else {
+          Bangle.emit("widget-anim-step");
+        }
+      } else {
+        // dir == 0??
       }
       if (stop) {
         clearInterval(exports.animInterval);