bendc/animateplus

Animate Plus is a small JavaScript library for animating HTML and SVG elements in a web browser. It weighs under 3 kilobytes after compression and targets a consistent 60 frames per second, making it well-suited for performance-sensitive pages and mobile devices. The library works by calling a single function, animate(), with an options object that describes what to animate and how. You point it at elements using a CSS selector or direct DOM references, then provide start and end values for CSS properties, transforms, or SVG attributes such as fill color. Duration, delay, and property values can each be defined as functions that receive the index of each element, which makes staggering a group of elements straightforward without writing loops. Timing follows a set of easing curves covering linear, cubic, quartic, quintic, exponential, circular, and elastic patterns. The elastic easing accepts extra parameters for amplitude and period to control the amount of bounce. Setting loop to true keeps an animation repeating, and direction can be set to alternate to reverse the animation on each cycle. A speed option lets developers slow down or speed up playback during authoring without changing duration values. animate() returns a JavaScript Promise that resolves once the animation finishes, passing the original options object back so they can be spread into the next call. This makes sequential animations clean to write with async/await or .then(), with no separate timeline API needed. Additional utilities include a stop() function that halts animation on specific elements, a motion blur effect for fast-moving objects, and a delay() helper that works like setTimeout but returns a Promise and is more battery-friendly. The library ships as an ES2015 module and is also available on CDNJS and jsDelivr.