WinJS enterPage animation doesn't work

Question

So I have been trying to get some animations in my application and seems like it doesn't work as expected.
When I call
WinJS.UI.Animation.enterPage(element)
everything is fine and the element scrolls from right to left which is default with opacity.
However the moment I override default values, everything just stops working, using something like this -
WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" });
I don't see any animation, the element just gets thrown there, and there's no opacity change for the element to be faded into the screen either. Again this kind of works partially, when I pair with WinJS.UI.Animation.exitPage(oldElement) but it shouldn't be
needed.
I also tried using custom animation so that I'd have more control over timing than what is provided as part of default animation library, and that behaves a lot more differently. I just got the code written for enterPage in WinJS, pulled into my code, and
tried tweaking around with the values... no matter what I do, I'd see only opacity change and the element fade in, and no translation at all. Even when I paired it with exitPage() or customExitPage(), nothing, it just wouldn't work.
Is this a problem with WinJS.UI.executeAnimation() and WinJS.UI.executeTransition()?
Regards, Rv.

Answer 1

function runEnterPageAnimation() {
// Get user selection from control
var pageSections = document.getElementById("pageSectionsControl").value;
document.querySelector(".box").style.overflow = "hidden";
// Animate the application's entrance in the number of stages chosen by the user
// Use the recommended offset by leaving the offset argument empty to get the best performance
var enterPage;
var rootGrid = document.getElementById("rootGrid");
var pageContent = document.getElementById("pageContent");
var header = document.querySelector("header");
var footer = document.querySelector("footer");
function runCustomShowStoryboard(target) {
var promise1 = WinJS.UI.executeAnimation(
target,
keyframe: "custom-translate-in",
property: "transform",
delay: 0,
duration: 367,
timing: "linear",
from: {top:"50px", left: "0px"},
to: {top:"0px", left: "0px"}
var promise2 = WinJS.UI.executeTransition(
target,
property: "opacity",
delay: 0,
duration: 367,
timing: "linear",
from: 0,
to: 1
return WinJS.Promise.join([promise1, promise2]);
switch (pageSections) {
case "1":
// Animate the whole page together
enterPage = runCustomShowStoryboard(rootGrid, null);
break;
case "2":
// Stagger the header and body
enterPage = WinJS.UI.Animation.enterPage([header, [pageContent, footer]], null);
break;
case "3":
// Stagger the header, input, and output areas
enterPage = runCustomShowStoryboard([header, pageContent, footer]);
break;
document.getElementById("message").textContent = "Page appeared in " + pageSections + " section(s).";
var runAnimation = document.getElementById("runAnimation");
runAnimation.addEventListener("click", runEnterPageAnimation, false);
Regards, Rv.