Author: John Au-Yeung

The JavaScript Web Animations API is a new API that lets us create animations with JavaScript by manipulating the elements that we want to animate.

In this article, we’ll look at how to create simple animations with the API.

Basic Usage

The way we create the animation is similar to how we do it with CSS. We specify how the element animates by specifying how we transform the element in keyframes. The only difference is that we do it with JavaScript instead of CSS.

To animate an element, we call the animate method on the element with 2 arguments. The first argument is an array with the keyframe for each entry. Each keyframe object has the styles to apply when the keyframe is displayed.

The second object is the timing object, which has the duration and iterations properties. duration is the number of milliseconds to animate the element. The iteration is the number of iterations to run the animation for. It can be a positive number of Infinity .

For instance, we can write the following HTML and JavaScript to animate an object:

HTML:

<img src='https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg' width=100 height=100>

JavaScript:

const action = [{
    transform: 'rotate(0) translate3D(-50%, -50%, 0)',
    color: '#000'
  },
  {
    color: '#431236',
    offset: 0.3
  },
  {
    transform: 'rotate(360deg) translate3D(-50%, -50%, 0)',
    color: '#000'
  }
];

const timing = {
  duration: 3000,
  iterations: Infinity
}

document.querySelector("img").animate(
  action,
  timing
)

The action array has the keyframe styles and the timing object has the duration and the number of iterations of the animation to run.

Then we should see an image that rotates forever.

Controlling playback with play(), pause(), reverse(), and playbackRate

The animate method returns an object with the play , pause and reverse methods. playbackRate is a numerical property that can be set by us. A negative playback rate means the animation plays in reverse.

For instance, we can add buttons to call these methods as follows. First, we add the following HTML code to add buttons for the playing, pausing, and reversing, and also a range slider for changing the playback rate:

<button id='play'>Play</button>
<button id='pause'>Pause</button>
<button id='reverse'>Reverse</button>
<input type='range' min='-2' max='2'>

<img src='https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg' width=100 height=100>

Then we add some CSS to move the image:

img {
  position: relative;
  top: 100px;
  left: 100px;
}

Finally, we add the JavaScript for the animation and event handler for the buttons and input that call the methods and set the playbackRate property as follows:

const action = [{
    transform: 'rotate(0) translate3D(-50%, -50%, 0)',
    color: '#000'
  },
  {
    color: '#431236',
    offset: 0.3
  },
  {
    transform: 'rotate(360deg) translate3D(-50%, -50%, 0)',
    color: '#000'
  }
];

const timing = {
  duration: 3000,
  iterations: Infinity
}

const animation = document.querySelector("img").animate(
  action,
  timing
)

const play = document.getElementById('play');
const pause = document.getElementById('pause');
const reverse = document.getElementById('reverse');
const range = document.querySelector('input');

play.onclick = () => animation.play();
pause.onclick = () => animation.pause();
reverse.onclick = () => animation.reverse();
range.onchange = () => {
  const val = range.value;
  animation.playbackRate = +val;
}

In the code above, we added the buttons. Then in the JavaScript, we have:

const play = document.getElementById('play');
const pause = document.getElementById('pause');
const reverse = document.getElementById('reverse');
const range = document.querySelector('input');

play.onclick = () => animation.play();
pause.onclick = () => animation.pause();
reverse.onclick = () => animation.reverse();
range.onchange = () => {
  const val = range.value;
  animation.playbackRate = +val;
}

to call the methods and set the properties on animation , which is assigned to the animation object that’s returned by animate .

Then we can do whatever action is indicated by the method’s names and also set the playback rate when we move the slider.

Getting Information Out of Animations

We can also get more information out of the animation object, like the duration and the current time of the animation.

We can get all that information from the animation object in the code above. In Chrome, we have the startTime and currentTime to get the start time and current time of the animation respectively.

It also has the playState and playbackRate . The properties of the animation object may differ between browsers.

Conclusion

We can create simple animations with the Web Animations API. It’s a simple API that lets us define keyframes for animation as we do with CSS animations.

The only difference is that we can do more things like changing the playback rate, and controlling the playback of the animation with play, pause, and reverse.

In the software development world, practice makes perfect. Therefore, we should find as many ways to practice programming as possible. With free public APIs, we can practice programming by creating apps that use those APIs.

In this article, we’ll look at some practice project ideas that can use some of those APIs.

Email Address Validator

We can use the MailboxValidator API to validate the email address so that we can make sure that are sending our email to a valid email address.

It’s great for marketers and salespeople to clean up their email lists so that they aren’t sending stuff to defunct or invalid email addresses.

The API can be accessed by signing up for an API key.

Email Automation App

We can write our own app to send emails by using the Mailgun API. It lets us send emails in batches to the email address of our choice.

Just make sure that we use it responsibly so that we aren’t sending our spam.

It has SDKs for many platforms like Python, Ruby, Perl, Java, Kotlin, Go, C#, Go, Node.js, and Luvit.

It can also be called from cURL directly.

It has a free tier so we can use it for practice and if we like it and want to use it for more things, we can pay for more access to the API.

The free tier according to this webpage has the following:

• send 5000 messages a month
• send 300 messages a day from the sandbox domain
• data retention for logs for a day
• no custom domains
• send up to 5 authorized recipients max

That’s definitely good enough if we’re only creating a practice app with it.

It also has APIs for email validation and API for sending more than a million emails a day.

Also, it has a deliverable service to improve deliverability.

Google Calendar App

With the Google Calendar API, we can create our programs to customize bring Google Calendar functionality to our own app.

We can use it to display, create and modify Google Calendar events.

Also, we can get push notifications, batch requests, and create and get reminders and notifications.

File Sharing App

We can use the Box, Dropbox, Google Drive, or OneDrive APIs to upload and download files from those provides automatically.

They all use OAuth authentication, so we can practice using that. With these APIs, we can automate the upload and download of data the way we please.

Also, we can automatically share data with other people of our choice.

With the Pastebin API, we can upload text to Pastebin and share it with other people. All it takes is registering for a free API key then we’re set.

Cryptocurrency Apps

There’re lots of cryptocurrency APIs to get various kinds of cryptocurrency information like exchange rates and prices of various cryptocurrencies.

Also, there are many APIs that are used for trading cryptocurrencies automatically.

This can be our opportunity to beat the market by using programs to help us trade faster than other people that don’t know how to program.

For instance, to get cryptocurrency information, there are the Coinbase, CoinAPI, and CoinDesk APIs. They all require an API key to get access to them.

If we want to write programs to trade cryptocurrency, we can use the Bitfinex, Bitmex, and Bittrex APIs. They all require an API key to get access to them.

Real Currency Apps

There are also many APIs for getting real currency data.

We can get exchange rates from the Exchangeratesapi.io, ExchangeRate-API, Czech National Bank, Fixer.io and Frankfurter APIs.

Most of them don’t need any authentication to get access to their data except the Frankfurter API, which requires an API key.

Photo by Pepi Stojanovski on Unsplash

Data Validation Apps

We can use data validation APIs to validate various kinds of data.

For instance, we can send email addresses, phone numbers, VAT numbers, and domain names to the Cloudmersive Validate API to validate them.

All we need is an API key to gain access to the API.

To check the language that a given piece of text is written in, we can use the languagelayer API to check what language it’s written.

It requires no authentication for access.

Conclusion

We can write practice apps to validate various kinds of data like email address and the language that something is written in with various data validation APIs.

Also, we can use free APIs to automate tasks like sending emails and updating our calendars.

Of course, the free version of those APIs aren’t going to very useful compared to the paid counterparts, but it’s still plenty good for using them for practice apps.

To measure navigation events like page load and going to different pages, we can use the Navigation Timing API.

In this article, we’ll take a look at how to use it in various scenarios.

Navigation Timing API

We can use the Navigation Timing API to collect performance data on the client which can then be transmitted to a server. The API also lets us measure data that was previously difficult to obtain, like the amount of time needed to unload the previous page, the time it takes to look up domains, total time pent running window’s load handler, etc.

All timestamps returned are measured in milliseconds. All properties are read-only.

The main interface for measure navigation performance is the PerformanceNavigationTiming interface.

A simple example to measure page load time would be the following:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
const pageLoadTime = `p.loadEventEnd - p.loadEventStart;`
console.log(pageLoadTime)

The code above measures the time between the loadEventStart event and loadEventEnd event is triggered.

We can also use it to measure how long it takes the DOM of a document to load as follows:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
const domLoadTime = p.domContentLoadedEventEnd - p.domContentLoadedEventStart;
console.log(domLoadTime)

In the code above, we used the domContentLoadedEventEnd and domContentLoadedEventStart properties to get the timing of the when the DOM finished loading and when the DOM started loading with those 2 properties respectively.

We can also use the domComplete to get when the DOM finished loading and when the page is interaction with the interactive properties of a performance entry.

We can write the following:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
console.log(p.domComplete);

Likewise, we can do something similar to measuring unloading time:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
const domLoadTime = p.unloadEventEnd - p.unloadEventStart;
console.log(domLoadTime)

Other Properties

We can get the number of redirects since the last non-redirect navigation under the current browsing context with the redirectCount read-only property.

To use it, we can write the following:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
console.log(p.redirectCount);

The type property will get us the navigation type. The possible values of this property are 'navigate', 'reload', 'back_forward', or 'prerender'.

We can get the type as follows:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
console.log(p.type);

Methods

We can serialize a PerformanceNavigationTiming object with the toJSON method.

To use it, we can write:

const perfEntries = performance.getEntriesByType("navigation");
const [p] = perfEntries;
console.log(p.toJSON());

Then we get something like the following from the console.log:

{
  "name": "https://fiddle.jshell.net/_display/",
  "entryType": "navigation",
  "startTime": 0,
  "duration": 0,
  "initiatorType": "navigation",
  "nextHopProtocol": "h2",
  "workerStart": 0,
  "redirectStart": 0,
  "redirectEnd": 0,
  "fetchStart": 0.31999999191612005,
  "domainLookupStart": 0.31999999191612005,
  "domainLookupEnd": 0.31999999191612005,
  "connectStart": 0.31999999191612005,
  "connectEnd": 0.31999999191612005,
  "secureConnectionStart": 0.31999999191612005,
  "requestStart": 2.195000008214265,
  "responseStart": 89.26000000792556,
  "responseEnd": 90.5849999981001,
  "transferSize": 1435,
  "encodedBodySize": 693,
  "decodedBodySize": 1356,
  "serverTiming": [],
  "unloadEventStart": 95.75999999651685,
  "unloadEventEnd": 95.75999999651685,
  "domInteractive": 116.96000001393259,
  "domContentLoadedEventStart": 116.97000000276603,
  "domContentLoadedEventEnd": 117.20500001683831,
  "domComplete": 118.64500000956468,
  "loadEventStart": 118.68000001413748,
  "loadEventEnd": 0,
  "type": "navigate",
  "redirectCount": 0
}

Conclusion

The PerformanceNavigationTiming interface is very handy for measure page navigation and loading times.

It’s information that’s hard to get any other way.

The interface provides us with various read-only properties that give us the timing of when various page load and navigation-related events occurred. All times are measured in milliseconds.