Web-Design
Wednesday May 19, 2021 By David Quintanilla
How to Build a Coming Soon Page With Lottie Animations


Final product imageFinal product imageFinal product image
What You will Be Creating

In a previous tutorial, we discovered how one can embody Adobe After Results animations on a web page utilizing the Lottie for Web library. Immediately, we’ll learn to repeat this course of utilizing the LottieFiles web player.

Our ultimate aim will likely be to construct a coming quickly web page that may include three completely different Lottie animations Lets begin?

Our Coming Quickly Web page

Right here’s the approaching quickly web page that we’re going to create throughout this tutorial:

You’ll want to view the demo on different screen sizes and test how the web page structure adjustments accordingly.

1. Start With the Required Property

For this train, we’re going to want some belongings.

Seize a Net Font

First, we’ll seize a customized net font from Envato Elements.

FRANK - FONT PACK on Envato ElementsFRANK - FONT PACK on Envato ElementsFRANK - FONT PACK on Envato Elements
FRANK – FONT PACK on Envato Components

Seize Some Lottie Animations

Then, we’ll seize a number of the many free Lottie animations from the LottieFiles library:

Customise the Animations

LottieFiles offers us the power to customise the animations in response to our wants. On the suitable facet of the animation’s essential web page there’s a panel with completely different customization choices.

Observe: we gained’t undergo all of them, you are able to do that by yourself time! Right here we’ll focus our consideration on two of them.

The customization options for a Lottie animation

Our animations will likely be used on an HTML web page. So, let’s choose the <html> possibility from the panel.

Selecting the html option from the panel

This can open a brand new web page the place we are able to configure the looks of the related animation. Primarily based on our choices, the markup of the lottie-player net part will likely be modified appropriately. That is the part that shops the animation particulars. Our web page will embody three animations, due to this fact we’ll add three such parts to our HTML afterward.

Configuring the web playerConfiguring the web playerConfiguring the web player

Modifying Lottie Animations

However what if we need to edit the animation colours? In case you fastidiously have a look at the demo, you’ll discover that the arrow and Twitter colours are completely different from the animations’ preliminary colours.

To do that we’ve to return to the right-hand panel and choose Edit Layer Colours for the goal animation.

Selecting the Edit Layer Colors option from the panel

This can open a brand new web page the place we are able to configure the colour(s) of the related animation. 

Customizing twitter's layer colorsCustomizing twitter's layer colorsCustomizing twitter's layer colors

After choosing the specified shade(s) and hitting Replace, we then should export the animation as JSON. This JSON will now embody the brand new shade(s).

Exporting the Lottie animation after modificationsExporting the Lottie animation after modificationsExporting the Lottie animation after modifications

Preview Lottie Animation

Subsequent, we’ll use Lottie Preview, one other instrument from LottieFiles, for previewing the animation. This can give us a brand new shareable URL of the animation that we’ll use to interchange the one which seems on the src attribute of the associated lottie-player part.

Previewing the new animationPreviewing the new animationPreviewing the new animation

2. Embrace the Lottie Participant JavaScript

Arising subsequent, we’ll embody the required Lottie Participant JavaScript file in our undertaking:

The required JavaScript file for Lottie PlayerThe required JavaScript file for Lottie PlayerThe required JavaScript file for Lottie Player

It’s price mentioning that this script will seem above the lottie-player part every time we choose the <html> possibility from the proper facet of the animation’s essential web page.

The required LottieFiles JvaScript scriptThe required LottieFiles JvaScript scriptThe required LottieFiles JvaScript script

3. Outline the HTML Markup

Our web page will encompass:

  • A title
  • A subtitle
  • A signup kind that may usually be built-in with a advertising platform like MailChimp. Additionally current on this type would be the arrow animation.
  • An under-construction animation
  • A hyperlink to the corporate’s Twitter account with the Twitter animation.

Right here’s the related markup:

Discover the three lottie-player parts. Some issues to notice:

  • The arrow and under-construction animations will play infinitely by default.
  • The Twitter animation will play on hover.
  • We gained’t outline a width and top for the under-construction animation by HTML. As its dimension will rely upon the display dimensions, let’s specify it by CSS.
  • As described within the earlier part, we’ll customise the colour of the arrow and Twitter animations, so we’ll cross to the associated lottie-players a special URL in comparison with the generated one. Keep in mind that we used the Lottie Preview instrument for this motion.
  • We’ll tidy up the produced code for the lottie-players by eradicating the default choices like background="clear" and velocity: "1".

4. Outline Some Fundamental Kinds

With the markup prepared, we’ll proceed with some reset kinds. Most significantly, the web page top may have a minimal top equal to the viewport top. This can assist us produce a fullscreen expertise on giant screens. Nonetheless, if crucial a vertical scrollbar will seem.

Listed here are the kinds:

5. Specify the Primary Kinds

As already talked about, the web page structure will look completely different relying on the viewport dimension.

Let’s be extra particular.

  • On screens as much as 1199px huge all components will likely be stacked.
  • On screens as much as 767px huge we’ll place the Twitter animation within the backside proper nook of the web page.
  • On screens wider than 1199px we’ll have a two-column structure.
  • On screens wider than 767px we’ll place the Twitter animation within the prime proper nook of the web page.
The page layout on screens wider than 767pxThe page layout on screens wider than 767pxThe page layout on screens wider than 767px
  • On screens which are no less than 1500px huge we’ll place the shape button subsequent to the enter ingredient.
The page layout on screens wider than 1500pxThe page layout on screens wider than 1500pxThe page layout on screens wider than 1500px
  • Final however not least, we’ll apply completely different hardcoded dimensions for the under-construction animation regarding the viewport dimensions.

With all of the above in thoughts, listed below are all of the related kinds:

As ever, one of the best ways to grasp these kinds is thru your browser’s inspection instruments.

Conclusion

Executed, people! Immediately, we constructed on what we discovered in a earlier Lottie tutorial and examined the steps wanted for including Lottie animations to an online web page utilizing LottieFile’s net participant. We solely lined some staple items, so make sure to dig into the documentation and attempt to implement one thing extra superior.

As we noticed, LottieFiles supplies (thanks workforce!) a number of useful instruments (e.g. Lottie Preview and Lottie Editor) for customizing the animations on the fly with out having to govern them on Adobe After Results. You’ll be able to benefit from them both through the use of a community-made animation on LottieFiles or a customized one (assuming that you’ve it in JSON format). 

In case you’re fascinated by exploring extra Lottie demos/examples associated to completely different applied sciences, try my printed articles on LottieFiles.

Right here’s a reminder of what we constructed:

As all the time, thanks lots for studying!



Source link