Web Development: How to Build a Coming Soon Page With Lottie Animations

How to Build a Coming Soon Page With Lottie Animations

Final product image — What You'll Be Creating

In a previous tutorial, we learned how to include Adobe After Effects animations on a page using the Lottie for Web library. Today, we’ll learn how to repeat this process using the LottieFiles web player.

Our final goal will be to build a coming soon page that will contain three different Lottie animations Shall we start?

Our Coming Soon Page

Here’s the coming soon page that we’re going to create during this tutorial:

Be sure to view the demo on different screen sizes and check how the page layout changes accordingly.

1. Begin With the Required Assets

For this exercise, we’re going to need some assets.

Grab a Web Font

First, we’ll grab a custom web font from Envato Elements.

Grab Some Lottie Animations

Then, we’ll grab some of the many free Lottie animations from the LottieFiles library:

An under-construction animation created by vik4graphic.

An arrow animation created by Артур Галустян.

A twitter animation created by Lordicon.

Customize the Animations

LottieFiles gives us the ability to customize the animations according to our needs. On the right side of the animation’s main page there’s a panel with different customization options.

Note: we won’t go through all of them, you can do that on your own time! Here we’ll focus our attention on two of them.

The customization options for a Lottie animation

Our animations will be used on an HTML page. So, let’s select the <html> option from the panel.

Selecting the html option from the panel

This will open a new page where we can configure the appearance of the associated animation. Based on our selections, the markup of the lottie-player web component will be modified appropriately. This is the component that stores the animation details. Our page will include three animations, therefore we’ll add three such components to our HTML later on.

Editing Lottie Animations

But what if we want to edit the animation colors? If you carefully look at the demo, you’ll notice that the arrow and Twitter colors are different from the animations’ initial colors.

To do this we have to go back to the right-hand panel and select Edit Layer Colors for the target animation.

Selecting the Edit Layer Colors option from the panel

This will open a new page where we can configure the color(s) of the associated animation.

After selecting the desired color(s) and hitting Update, we then have to export the animation as JSON. This JSON will now include the new color(s).

Exporting the Lottie animation after modifications

Preview Lottie Animation

Next, we’ll use Lottie Preview, another tool from LottieFiles, for previewing the animation. This will give us a new shareable URL of the animation that we’ll use to replace the one that appears on the src attribute of the related lottie-player component.

2. Include the Lottie Player JavaScript

Coming up next, we’ll include the required Lottie Player JavaScript file in our project:

The required JavaScript file for Lottie Player

It’s worth mentioning that this script will appear above the lottie-player component each time we select the <html> option from the right side of the animation’s main page.

The required LottieFiles JvaScript script

3. Define the HTML Markup

Our page will consist of:

A title
A subtitle
A signup form that will normally be integrated with a marketing platform like MailChimp. Also present on this form will be the arrow animation.
An under-construction animation
A link to the company’s Twitter account with the Twitter animation.

Here’s the associated markup:

<div class="grid">
  <div class="left">
    <h1 class="title">Our new website is coming soon!</h1>
    <p class="subtitle">Get notified as soon as we go live</p>
    <form>
      <input type="email" placeholder="Enter your email">
      <button type="submit">Notify me</button>
      <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_ojgw1ksr.json" style="width: 100px; height: 100px;" loop autoplay class="arrow"></lottie-player>
    </form>
  </div>
  <div>
    <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_AQcLsD.json" loop autoplay class="under-construction"></lottie-player>
  </div>
</div>

<a href="" class="twitter" title="Find us on Twitter">
  <lottie-player src="https://assets8.lottiefiles.com/packages/lf20_jqqvk7ww.json" style="width: 60px; height: 60px;" hover></lottie-player>
</a>

Notice the three lottie-player components. Some things to note:

The arrow and under-construction animations will play infinitely by default.
The Twitter animation will play on hover.
We won’t define a width and height for the under-construction animation through HTML. As its size will depend on the screen dimensions, let’s specify it through CSS.
As described in the previous section, we’ll customize the color of the arrow and Twitter animations, so we’ll pass to the related lottie-players a different URL compared to the generated one. Remember that we used the Lottie Preview tool for this action.
We’ll tidy up the produced code for the lottie-players by removing the default options like background="transparent" and speed: "1".

4. Define Some Basic Styles

With the markup ready, we’ll continue with some reset styles. Most importantly, the page height will have a minimum height equal to the viewport height. This will help us produce a fullscreen experience on large screens. Still, if necessary a vertical scrollbar will appear.

Here are the styles:

@font-face {
  font-family: "frankblack_rough";
  src: url("frank-blackrough-webfont.woff2") format("woff2"),
    url("frank-blackrough-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "frankregular_rough";
  src: url("frank-regularrough-webfont.woff2") format("woff2"),
    url("frank-regularrough-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "franklight_rough";
  src: url("frank-lightrough-webfont.woff2") format("woff2"),
    url("frank-lightrough-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --body-bg-color: bisque;
  --form-submit-text-color: #fff;
  --form-submit-bg-color: #589fa8;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-weight: normal;
}

button {
  cursor: pointer;
}

button,
input {
  font-family: inherit;
  font-size: 100%;
  border: none;
}

body {
  display: flex;
  min-height: 100vh;
  font: clamp(16px, 2.5vw, 24px) / 1.2 "frankregular_rough";
  background: var(--body-bg-color);
}

5. Specify the Main Styles

As already mentioned, the page layout will look different depending on the viewport size.

Let’s be more specific.

On screens up to 1199px wide all elements will be stacked.
On screens up to 767px wide we’ll position the Twitter animation in the bottom right corner of the page.

On screens wider than 1199px we’ll have a two-column layout.
On screens wider than 767px we’ll position the Twitter animation in the top right corner of the page.

The page layout on screens wider than 767px

On screens that are at least 1500px wide we’ll position the form button next to the input element.

The page layout on screens wider than 1500px

Last but not least, we’ll apply different hardcoded dimensions for the under-construction animation concerning the viewport dimensions.

With all the above in mind, here are all the associated styles:

/*CUSTOM VARIABLES HERE*/

.grid {
  width: 100%;
  margin: auto;
}

.grid .left {
  max-width: 90%;
  width: 600px;
  margin: 20px auto 0;
}

.grid .left .title {
  font: clamp(30px, 2.5vw, 50px) / clamp(35px, 2.5vw, 55px) "frankblack_rough";
  margin-bottom: 40px;
}

.grid .left .subtitle {
  margin-bottom: 10px;
}

.grid .left form {
  position: relative;
}

.grid .left input,
.grid .left button {
  width: 100%;
  padding: 15px;
}

.grid .left input {
  font-family: "franklight_rough";
}

.grid .left button {
  color: var(--form-submit-text-color);
  background: var(--form-submit-bg-color);
}


/* LOTTIE PLAYERS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.arrow {
  position: absolute;
  right: 0;
  top: 100%;
}

.under-construction {
  width: 300px;
  height: 300px;
  margin: 20px auto 0;
}

.twitter {
  position: fixed;
  bottom: 20px;
  right: 10px;
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 768px) {
  .under-construction {
    width: 500px;
    height: 500px;
  }

  .twitter {
    bottom: auto;
    top: 20px;
  }
}

@media (min-width: 1200px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .grid .left {
    padding-left: 20%;
    margin: 0;
  }

  .grid .left {
    width: auto;
  }

  .under-construction {
    margin: 0 auto;
  }
}

@media (min-width: 1500px) {
  .grid .left {
    max-width: 80%;
  }

  .grid .left input {
    border-radius: 30px;
  }

  .grid .left button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
  }
}

@media (min-width: 1500px) and (min-height: 900px) {
  .under-construction {
    width: 700px;
    height: 700px;
  }
}

As ever, the best way to understand these styles is through your browser’s inspection tools.

Conclusion

Done, folks! Today, we built on what we learned in a previous Lottie tutorial and examined the steps needed for adding Lottie animations to a web page using LottieFile’s web player. We only covered some basic things, so be sure to dig into the documentation and try to implement something more advanced.

As we saw, LottieFiles provides (thanks team!) several helpful tools (e.g. Lottie Preview and Lottie Editor) for customizing the animations on the fly without having to manipulate them on Adobe After Effects. You can take advantage of them either by using a community-made animation on LottieFiles or a custom one (assuming that you have it in JSON format).

If you’re interested in exploring more Lottie demos/examples related to different technologies, check out my published articles on LottieFiles.

Here’s a reminder of what we built:

As always, thanks a lot for reading!

Web Development

Wednesday, May 19, 2021