title: How to change the values of the offsetArray of the animation object of a createPeekAnimation function in Windows 8 desktop?
body: <p>I am trying to use the Peek Animation function in a Windows 8 application. In my code I call a <code>runHomeScreenUpdates</code> function which updates the home screen tiles in specific intervals. </p>
  
  <p>Earlier I was using the <code>createAddToListAnimation</code> function, which was working fine. But for the smaller tiles I want to use the Peek Animation. I pass two image objects as mentioned in the <a href="http://msdn.microsoft.com/en-us/library/windows/apps/jj244627.aspx" rel="nofollow">MSDN example</a>. I also edited the offset of the images by changing the "style top property" as mentioned but it doesn't work. The animation object "peekanimation" here does not get any offset values. When I checked it using a breakpoint, the offset array of the animation object has '0' as its values. How do I change this offsetArray value?</p>
  
  <pre><code>function peekTile(tile1, tile2) {
    // Create peek animation
    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    // Reposition tiles to their desired post-animation position
    tile1.style.top = "-120px";
    tile2.style.top = "0px";
    // Execute animation
    peekAnimation.execute();
    return "success";
  }
  function runHomeScreenUpdates(obj) {
    initHomeScreenUpdates();
    var updateInterval = obj.data("updateInterval");
    var localStorageKey = obj.data("localStorageKey");
    clearInterval($(obj).data("autoUpdateInterval"));
    var data = localStorage.getItem(localStorageKey);
    // for bigger tiles I used create add to list animation. it works fine.
    if (WinJS.Navigation.location.indexOf("hub.html") &gt;= 0) {
      var interval = setInterval(function () {
        var index = $(obj).data("index");
        if (index == 22 || index == 23) {
          var lists = JSON.parse(localStorage.getItem("lists"));
          lists = lists[localStorage.getItem("selectedCity")] || {};
          if (lists.count &gt; 0) {
            if (sessionStorage.getItem("listIndex") == null || sessionStorage.getItem("listIndex") &gt;= (lists.count - 1)) {
              sessionStorage.setItem("listIndex", 0);
            } else {
              sessionStorage.setItem("listIndex", parseInt(sessionStorage.getItem("listIndex")) + 1);
            }
            var div = $(obj).find(".largeTileTextTemplateMedText");
            var newDiv = document.createElement("div");
            newDiv.innerHTML = lists[sessionStorage.getItem("listIndex")].text;
            newDiv.className = "largeTileTextTemplateMedText";
            var affected = div.get(0);
            // Step 1: Create the animation object and save the result
            var animation = WinJS.UI.Animation.createAddToListAnimation(newDiv, affected);
            // Step 2: Insert the element given in the added parameter immediately before
            // the element given in the affected parameter. This causes both elements to move.
            affected.parentNode.insertBefore(newDiv, affected);
            // Step 3: Execute the animation
            animation.execute().then(function () {
              myData4[index].text = lists[sessionStorage.getItem("listIndex")].text;
              myData4[index].id = lists[sessionStorage.getItem("listIndex")].id;
              hubList = new WinJS.Binding.List(myData4);
              groupedItems = hubList.createGrouped(function (item) { return item.group.key; }, function (item) { return item.group; });
            });
            $(affected).remove();
          }
        } else {
        // for the smaller tiles i want to use the peek animation!! this part--
          var img = $(obj).find(".foodshot");
          var foodshots = JSON.parse(localStorage.getItem("foodshots"));
          foodshots = foodshots[localStorage.getItem("selectedCity")] || {};
          if (foodshots.count &gt; 0) {
            if (sessionStorage.getItem("foodshotIndex") == null || sessionStorage.getItem("foodshotIndex") &gt;= (foodshots.count - 1)) {
              sessionStorage.setItem("foodshotIndex", 0);
            } else {
              sessionStorage.setItem("foodshotIndex", parseInt(sessionStorage.getItem("foodshotIndex")) + 1);
            }
            var r = sessionStorage.getItem("foodshotIndex");
            var newsrc = foodshots[r].url;
            var newimg = document.createElement("img");
            newimg.setAttribute("src", newsrc);
            newimg.className = "foodshot";
            var affected = img.get(0);
            affected.style.top = "0px";
            newimg.style.top = "120px";
            var check = peekTile(affected, newimg);
            if(check == "success"){
              myData4[index].cuisineID = foodshots[r].cuisine_id;
              myData4[index].cuisine = foodshots[r].cuisine;
              myData4[index].picture = foodshots[r].url;
              $(obj).find(".foodshot-text").get(0).innerHTML = foodshots[r].cuisine;
              hubList = new WinJS.Binding.List(myData4);
              groupedItems = hubList.createGrouped(function (item) { return item.group.key; }, function (item) { return item.group; });
            };
            $(affected).remove();
          }
        }
      }, updateInterval);
      $(obj).data("autoUpdateInterval", interval);
    }
  </code></pre>
  
  <p>On the home screen. The images don't appear after i run the animation. </p>