Scrollview without/stop animation

Gesture enabled responsive lists
1

I use a scrollview to change between pages/forms at a top level and it works fine with animation.

However my first page is not always the same… e.g. when it is the first time that a user logs in it needs to show the Registration page first. In this case want to prevent the scrollview from animating and making the transition instant.

  1. I tried returning false from animation start… but not working.
  2. I tried setting the duration = 0 in the onAnimationStart event but changing properties here does not seem to have any effect.
2

Hi Hendrik,

Indeed, currently there’s no option or parameter to turn of the animation when scrolling to a page.
One possible solution is to disable the animation from CSS when navigating initially.

Markup

    <div id="cont" class="demo-no-anim">
        <ul id="scrollview" class="mbsc-cloak mbsc-align-center">
            <li data-id="1">1</li>
            <li data-id="2">2</li>
            <li data-id="3">3</li>
            <li data-id="4">4</li>
            <li data-id="5">5</li>
        </ul>
    </div>

JS

var contentView = mobiscroll.scrollview('#scrollview', {
    layout: 1,
    paging: true
});

contentView.navigate(3);

setTimeout(function () {
    // Remove the css class which disables the animation
    document.getElementById('cont').classList.remove('demo-no-anim');
});

CSS

.demo-no-anim .mbsc-scv-sc {
    transition: none !important;
}

Let me know if this works for you!