How to implement animated scrolling in YUI3?

Question

I fail to create animated scroll using YUI3.

It should be compatible with iOS inertial scrolling, and I want to trigger animated scrolling programatically. But I can't find correct syntax for YUI3 due to lack of docs.

1) The following code works:

   scrollArea._node.scrollLeft = 200; //the element is scrolled!
   // so the variable is defined correctly and CSS also works!

2) The following code also works (if I am using absolute positioning to emulate scroll):

        animation = new Y.Anim({
            node: content,
            to: {
                left: -200
            }
        });
        animation.run();

3) But te following does not:

        animation = new Y.Anim({
            node: scrollArea,
            scroll: {
                to: {
                    scrollLeft: 200
                }
            }
        });
        animation.run();

4) Here's how the markup looks like:

<div class="scroll-area"> <!-- scrollArea, overflow: scroll -->
    <ul class="content"> <!-- content -->
        <li></li><li></li><li></li>
    </ul>
</div>

I hope this is merely a question of syntax. Here the question is solved for YUI2

Answer 1

In the third example, the issue appears to be your usage of scroll as an attribute for the Anim constructor, which is valid for how YUI2's Scroll utility works, but YUI3's Anim is much more powerful than that.

You were close with the second attempt. Here is the code revised:

    animation = new Y.Anim({
        node: scrollArea,
        to: {
            scrollLeft: 200
        }
    });
    animation.run();

I have moved the scrollLeft field into the to attribute and changed the node to scrollArea instead of content. If you plan to perform this animated scrolling operation often, then might I suggest creating a wrapper function which reuses a single Anim object. This example may be of use to you in demonstrating such reuse. Good luck.