14 of the best JavaScript APIs

Here’s our pick of the best JavaScript APIs around right now, plus a guide to getting started using them. These will help you add new and interesting functionality to your sites and apps. A word of warning: many of these APIs are still in development, so make sure you check browser support before you start using them, and provide fallbacks where necessary. You’ll find a note of the API status at time of writing at the top of each entry.

 

1. Web Animations API

JavaScript APIs: Web Animations API

  • Status: Working Draft
  • Read more: W3C guide

Animation with JavaScript has historically had a bad rap. Moving elements by changing position values causes lots of repaints and results in poor performance. CSS animations are the better choice, but they are hard to manipulate on the fly.

The Web Animations API provides access to the same animation engine that powers the CSS side.

Const animation = el.animate(
	[
		{ transform: "rotate(0)" },
		{ transform: "rotate(360deg)" }
	],
	1000
);

Every element has an animate method, which takes a series of keyframes plus either a settings object or a duration. This returns an animation object, which can then be updated to play, pause and adjust the playback speed.

There is added benefit coming from Houdini, with animation worklets. These work on a similar syntax to the API, but allow for finer control. They can be controlled by inputs other than time, such as scroll or touch position. This is still in development – to find out more, head over to the Chrome developer blog.

Support for the Web Animations API itself is small but is quickly growing. By using feature detection, those who have support for it can feel the benefits straight away.

 

View on creativebloq.com

 

 

Your email address will not be published.