Search code examples
javascriptpolymerweb-animations

Animate DOM properties (scrollTop) using Web Animations

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.

Solution

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

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