Animate DOM properties (scrollTop) using Web Animations

Question

Web Animations is a new w3c spec, just to be clear what we're talking about. Either way, I wanted to scroll to a certain element smoothly. Using jQuery's Animate function this was always a no-brainer, but this seems to not be as simple with Web Animations. Is there any way to use the Web Animation timing functions and apply them to a DOM property (scrollTop). The reason I am asking is that I don't want to load an entire (extra) library just to use its interpolation function whilst doing it with a different technology/library in the rest of my application.

Pursuing the same issue. Seems WA only animates CSS properties, scrollTop not being one. — clyfe, Nov 06 '14 at 16:18
@clyfe Good, turns out I wasn't entirely crazy then :P Either way, I never implemented it, but I was considering at one point to just animate a random inexpensive css property on an invisible element and use that to move the `scrollTop`. Not beautiful, but better than loading an entire extra library. — David Mulder, Nov 06 '14 at 16:21

score 2 · Accepted Answer · edited Nov 13 '14 at 00:30

2

You can use Custom Effects to animate scrollTop, e.g.

var a = new Animation(el, function(time) {
    el.scrollTop = el.scrollTop + time * 500;
}, 1000);

edited Nov 13 '14 at 00:30

David Mulder

26,123
9
51
114

answered Nov 10 '14 at 18:49

Yvonne Yip

141
3

Still have to try this out later tonight, but that looks perfect :O And thanks for your amazing work on Polymer :D (and welcome to StackExchange?) – David Mulder Nov 10 '14 at 18:55
Here's a working JSFiddle btw for everybody who comes across this at some point: http://jsfiddle.net/4hd3hjrx/1/ and http://jsfiddle.net/4hd3hjrx/ – David Mulder Nov 13 '14 at 16:52
1

`Animation` is now called `KeyframeEffect` in the W3C spec – Sean Lynch Apr 07 '15 at 12:48
3

Though in the current version of the spec. and browser implementations `KeyframeEffect` doesn't take a callback function, so the code above doesn't work (anymore). – Sebastian Zartner Jan 21 '19 at 11:15

score 2 · Answer 2 · answered Nov 10 '14 at 20:32

For the sake of documentation, starting from Yvonne's answer, using core-animation:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-animation/core-animation.html">

<polymer-element name="animated-scroll">
  <template>

    <style>
      #scroller {
        height: 300px;
        overflow-y: scroll;
      }
    </style>
    <button on-tap="{{animate}}">Scroll it</button>
    <div id="scroller">
      <content></content>
    </div>
    <core-animation id="animation" duration="400" easing="ease-in-out"></core-animation>

  </template>
  <script>
    (function () {

      Polymer({
        animate: function (e) {
          var start = this.$.scroller.scrollTop;
          var end = 500; // px
          var delta = end - start;
          this.$.animation.target = this.$.scroller;
          this.$.animation.customEffect = function (timeFraction, target, animation) {
            target.scrollTop = start + delta * timeFraction;
          };
          this.$.animation.play();
        }
      });

    })();
  </script>
</polymer-element>

Do you have a version using Polymer 1.0? core-animation has been deprecated and the new neon-animation support is quite inscrutable. — David Given, Feb 22 '16 at 22:35

Animate DOM properties (scrollTop) using Web Animations

2 Answers2