Animate DOM properties (scrollTop) using web animation

Question

Web Animation is the new w3c specification , just to understand what we're talking about. In any case, I wanted to scroll to a specific element smoothly. Using the jQuery Animate function, it has always been difficult, but it is not so simple with web animation. Is it possible to use web animation synchronization functions and apply them to the DOM property ( scrollTop ). The reason I ask is because I don't want to load the entire (optional) library in order to use its interpolation function, executing it with another technology / library in the rest of my application.

Answer 1

You can use Custom Effects to animate scrollTop , for example

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

Answer 2

For documentation, starting with 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>