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 tips on how to embody Adobe After Results animations on a web page utilizing the Lottie for Web library. At the moment, we’ll learn to repeat this course of utilizing the LottieFiles web player.

Our ultimate aim can be to construct a coming quickly web page that may include three totally different Lottie animations We could begin?

Our Coming Quickly Web page

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

You should definitely view the demo on different screen sizes and test how the web page format modifications accordingly.

1. Start With the Required Belongings

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

Seize a Net Font

First, we’ll seize a customized internet 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 few of the many free Lottie animations from the LottieFiles library:

Customise the Animations

LottieFiles offers us the power to customise the animations in accordance with our wants. On the fitting facet of the animation’s important web page there’s a panel with totally different customization choices.

Notice: we received’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 can be used on an HTML web page. So, let’s choose the <html> possibility from the panel.

Selecting the html option from the panel

It will open a brand new web page the place we will configure the looks of the related animation. Based mostly on our choices, the markup of the lottie-player internet part can be modified appropriately. That is the part that shops the animation particulars. Our web page will embody three animations, subsequently we’ll add three such elements to our HTML afterward.

Configuring the web playerConfiguring the web playerConfiguring the web player

Enhancing Lottie Animations

However what if we wish to edit the animation colours? If you happen to rigorously take a look at the demo, you’ll discover that the arrow and Twitter colours are totally different from the animations’ preliminary colours.

To do that we have now 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

It will open a brand new web page the place we will 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 colour(s) and hitting Replace, we then should export the animation as JSON. This JSON will now embody the brand new colour(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. It will give us a brand new shareable URL of the animation that we’ll use to exchange 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. Embody 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 value 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 important 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 type that may usually be built-in with a advertising platform like MailChimp. Additionally current on this kind 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 elements. Some issues to notice:

  • The arrow and under-construction animations will play infinitely by default.
  • The Twitter animation will play on hover.
  • We received’t outline a width and peak for the under-construction animation by means of HTML. As its dimension will depend upon the display screen dimensions, let’s specify it by means of CSS.
  • As described within the earlier part, we’ll customise the colour of the arrow and Twitter animations, so we’ll go to the associated lottie-players a distinct URL in comparison with the generated one. Do not forget 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 Primary Types

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

Listed here are the kinds:

5. Specify the Important Types

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

Let’s be extra particular.

  • On screens as much as 1199px extensive all parts can be stacked.
  • On screens as much as 767px extensive 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 format.
  • 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 not less than 1500px extensive we’ll place the shape button subsequent to the enter aspect.
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 totally different hardcoded dimensions for the under-construction animation regarding the viewport dimensions.

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

As ever, the easiest way to grasp these kinds is thru your browser’s inspection instruments.

Conclusion

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

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

If you happen to’re excited about exploring extra Lottie demos/examples associated to totally different applied sciences, try my printed articles on LottieFiles.

Right here’s a reminder of what we constructed:

As at all times, thanks so much for studying!



Source link