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

Our last purpose shall be to construct a coming quickly web page that may include three completely 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 examine how the web page structure modifications accordingly.

1. Start With the Required Property

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

Seize a Internet 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 Parts

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 aspect of the animation’s important web page there’s a panel with completely 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

It will open a brand new web page the place we are able to configure the looks of the related animation. Based mostly on our choices, the markup of the lottie-player net 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 in a while.

Configuring the web playerConfiguring the web playerConfiguring the web player

Enhancing Lottie Animations

However what if we wish 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 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

It will 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 deciding on the specified shade(s) and hitting Replace, we then need to 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 device from LottieFiles, for previewing the animation. It will give us a brand new shareable URL of the animation that we’ll use to switch 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. Embody the Lottie Participant JavaScript

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

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 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 and marketing 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 top for the under-construction animation by way of HTML. As its measurement will rely upon the display 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 go to the associated lottie-players a distinct URL in comparison with the generated one. Do not forget that we used the Lottie Preview device for this motion.
  • We’ll tidy up the produced code for the lottie-players by eradicating the default choices like background="clear" and pace: "1".

4. Outline Some Primary Types

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

Listed here are the types:

5. Specify the Foremost Types

As already talked about, the web page structure will look completely 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 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 a minimum of 1500px extensive we’ll place the shape button subsequent to the enter component.
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 here are all of the related types:

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

Conclusion

Completed, of us! As we speak, we constructed on what we realized 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 be sure you dig into the documentation and attempt to implement one thing extra superior.

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

In case you’re keen on exploring extra Lottie demos/examples associated to completely different applied sciences, take a look at my revealed articles on LottieFiles.

Right here’s a reminder of what we constructed:

As at all times, thanks rather a lot for studying!



Source link