CODEWITHSUNDEEP
javascriptpolymerinfinite-scrollautoscrolliron-list
Mathieu Schaeffer
Mathieu Schaeffer

Reputation: 792

Smooth auto scroll with iron-list in Polymer 1.0

I would like to have a smooth auto-scroll to a specific element in a Polymer 1.0 iron-list when I click on a button.

For now I have a simple auto scroll thanks to the scrollToIndex method. But I would like to have a smooth animation, like the jQuery animation $("#list").animate({ scrollTop: 300 }, 2000);, but without jQuery.

One of the big problem I encountered is that since iron-list don't display all the items at once, I cannot find the scrollTop position of a specific item because it is not yet in the DOM.

I started a JSFiddle here : http://jsfiddle.net/c52fakyf/2/

Thanks for any help!

Upvotes: 0

Views: 342

Answers (1)

Rickard Elimää
Rickard Elimää

Reputation: 7591

I just learned animation through requestAnimationFrame, and I thought about this question. I made a simple animation method:

animate: function(callbackObj, duration) {
        var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
        var startTime = 0, percentage = 0, animationTime = 0;

        duration = duration*1000 || 1000;

        var animate = function(timestamp) {

          if (startTime === 0) {
              startTime = timestamp;
            } else {
              animationTime = timestamp - startTime;
            }

          if (typeof callbackObj.start === 'function' && startTime === timestamp) {
             callbackObj.start();

             requestAnimationFrame(animate);
          } else if (animationTime < duration) {
             if (typeof callbackObj.progress === 'function') {
               percentage = animationTime / duration;
               callbackObj.progress(percentage);
             }

            requestAnimationFrame(animate);
          } else if (typeof callbackObj.done === 'function'){
              callbackObj.done();
          }
        };

      return requestAnimationFrame(animate);
},

It's basically a recursive method that updates every time the screen refreshes. The method takes in a callback object with functions under the properties .start, .progress, and .done.

I modified your code a bit:

    _autoScroll: function() {
      var sequenceObj = {};
      var seconds = 2;
      var rangeInPixels = 500;

      sequenceObj.progress = (function(percentage) {
        this.$.itemList.scroll(0, this.easeInOutQuad(percentage)*rangeInPixels);
      }).bind(this);

      this.animate(sequenceObj, seconds);
    },

I got the easeInOut from Robert Penner's easing functions:

    easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },

And violá:

http://jsfiddle.net/5uLhu6qa/

It's not exactly what you're asking for, but it's a start that you can continue with.

Upvotes: 2

Related Questions