locked
Possible to smoothly animate WinJS.UI.Hubs sectionOnScreen transition?

    Question

  • Is it possible to make sectionOnScreen not instant but rather an animated scroll to the position of the section?
    Thursday, April 3, 2014 12:32 AM

Answers

  • Of course! Monkey-Patching to the rescue :)

    old = WinJS.UI.Hub.prototype._scrollToSection;
          WinJS.UI.Hub.prototype._scrollToSection = function(index) {
            return old.call(this, index, true);
          };


    • Marked as answer by pkursawe Thursday, April 3, 2014 9:07 AM
    Thursday, April 3, 2014 9:07 AM

All replies

  • Hi pkursawe,

    Basically you have to rewrite the function for sectionOnScreen transition.

    scrollPosition property could be a good thing for you, for instance you can scoll every 50ms with 5px and make it looks like animation scrolling.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, April 3, 2014 8:10 AM
    Moderator
  • Of course! Monkey-Patching to the rescue :)

    old = WinJS.UI.Hub.prototype._scrollToSection;
          WinJS.UI.Hub.prototype._scrollToSection = function(index) {
            return old.call(this, index, true);
          };


    • Marked as answer by pkursawe Thursday, April 3, 2014 9:07 AM
    Thursday, April 3, 2014 9:07 AM
  • Greate prototype rewrite! Should help others.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, April 3, 2014 10:04 AM
    Moderator
  • Works like a charm.. You could also call the _scrollToSection with a second parameter set to true on the hub object, ie:

    var myHub = element.querySelector(".win-hub").winControl;
    myHub._scrollToSection(index, true);
    As you can see in the github code for WinJS at this line that the second param is implemented (just not documented and/or standard used)

    Since it is a _function it is likely that the interface could change somewhere soon so maybe pkursawe's answer is somewhat more update-proof...


    Wednesday, November 19, 2014 2:07 PM