This is a part of our weekly feature where we would build a simple webpage with different CSS and JavaScript techniques. Here, I pick a random #dailyui shot from Dribbble and show you how you can convert it to functional HTML page. I am not going to use SCSS or LESS, Pug or any other preprocessors. We would build these pages with just plain HTML, CSS and (mostly) vanilla JavaScript. At the end of the tutorials, we would create a list of key takeaways. I would try to explain in as simple a way as I can.

What we will build

This week I chose this Dribble shot. I like how the animation grabs the user’s attention without being too obtrusive. The animations are smooth and have a logical flow. Although email clients do not allow external JavaScript, this page may not have any practical application. But it is a good starting point to learn how we can use Anime.js to chain animations.

You can try the demo here. You can also check the GitHub repository for all the HTML, CSS and JavaScript files.

1. Getting Started

Planning the layout

We are going to have three sections: the top black bar will have id topbar, the middle part of the receipt (which contains the table) will have id details and finally the barcode area will be contained inside #barcode

Planning the animations

We are going to use Anime.js for this tutorial. It is a lightweight javascript animation framework. If you have a close look at the animations, you’d notice that the animations run one after another. That is, each one runs after the last one completes. It is a good case to implement Anime.js’ timeline feature.

So, while animating, we would just start displaying each animation by setting the element’s scale from 0 to 1. This way we can show each element one after one.

It is important to note here that we can’t insert elements and animate them one after another. This is because, due to performance issues, Anime.js do not read the DOM every time an animation is to be fired.

This is fairly simple: we added a table with thead, tbody, and tfoot. Then we set a bunch CSS styles to correctly match the mockup.

6. Perforated effect

If you look at the mockup, you can see the part that separates the details table and barcode, has two little semi-circles at both ends. It gives the design a paper-like effect. To achieve this, I added a div after the table in this way:

Animating the topbar

Notice that when the animation starts the apple logo is the middle of the topbar. Then it moves to the left and the date comes in. So, let’s position the apple logo in the middle of the topbar. To do so, add these in style.css:

Here, first we create a anime timeline. Then we start our series of animations by showing #inner (by changing scale from 0 to 1). Then, we animate the apple-logo from the center to the left (by setting left from -50% to 0). Why -50%? Because that’s how to apple-logo was positioned in center.

Also, note we set the transform-origin on #inner to top. This is because we want start the animation from the top.

This is fairly simple: we show the date by changing scale from 0 to 1, we add a subtle motion animation by changing translateX from -8px to 0. Notice the offset parameter. Offset is used to indicate the starting time of an animation. Here we want no gap between the logo and the date to animate. We do so with +=0.

If you refresh the page, the topbar animation will be there!

Animating the details table

Next, we want to animate the details section. Add these to style.css:

#details {
...
transform-origin:top center;
}

This is to start the animation from the top center position. Next, in main.js:

Nothing fancy here except the delay parameter. The delay parameter indicates the amount to miliseconds between two animations. Instead of the default, we add a subtlty to it by increasing the delay by 200 ms.

Animating the barcode

This is just like the details section. We create a drop-like animation with translateX. In style.css:

And that should be all! Just refresh the page and the animations would be there.

Conclusion

Anime.js is a feature-rich library. It puts a lot of focus on performance. With anime.js you can do a lot with html elements. In this tutorial, I just scrated the surface by showing how animations can be chained. If you are intrested, do read the documentation.