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 realized find out how to embody Adobe After Results animations on a web page utilizing the Lottie for Web library. Immediately, we’ll discover ways to repeat this course of utilizing the LottieFiles web player.

Our closing aim shall be to construct a coming quickly web page that can 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:

Make sure to 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 wish some belongings.

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 provides us the power to customise the animations in line with our wants. On the appropriate aspect of the animation’s primary web page there’s a panel with totally different customization choices.

Be aware: 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 shall 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 may open a brand new web page the place we will configure the looks of the related animation. Based mostly on our alternatives, the markup of the lottie-player internet element shall be modified appropriately. That is the element that shops the animation particulars. Our web page will embody three animations, due to this fact 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 fastidiously have 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’ve got 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 may 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 need to 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. This may 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 element.

Previewing the new animationPreviewing the new animationPreviewing the new animation

2. Embrace the Lottie Participant JavaScript

Developing subsequent, we’ll embody the required Lottie Participant JavaScript file in our venture:

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 element every time we choose the <html> possibility from the proper aspect of the animation’s primary 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 can usually be built-in with a advertising and marketing platform like MailChimp. Additionally current on this manner 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 way of HTML. As its measurement will rely on the display screen dimensions, let’s specify it by way of 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 unique 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 Fundamental Types

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

Listed here are the types:

5. Specify the Predominant Types

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

Let’s be extra particular.

  • On screens as much as 1199px extensive all parts shall 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 high 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 can be no less than 1500px extensive we’ll place the shape button subsequent to the enter factor.
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 in regards to the viewport dimensions.

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

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

Conclusion

Performed, of us! Immediately, we constructed on what we realized 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 staple items, so remember to dig into the documentation and attempt to implement one thing extra superior.

As we noticed, LottieFiles gives (thanks staff!) 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 reap the benefits of them both by utilizing a community-made animation on LottieFiles or a customized one (assuming that you’ve it in JSON format). 

If you happen to’re inquisitive about exploring extra Lottie demos/examples associated to totally different applied sciences, take a look at my revealed articles on LottieFiles.

Right here’s a reminder of what we constructed:

As all the time, thanks loads for studying!



Source link