After spending hours, working to brush up my UI development skills after ages, I knew that this time I’ll take this further and make something great out of it. So I sat down with my desktop in front and had mixed thoughts. Shall I make a product page or a portfolio page? Confused, I opened YouTube to get some examples. Top ten results showed me a product or a customer service related tutorial videos. As you might’ve guessed, I decided to make a product page design. I opened up Adobe XD to use it professionally for the first time since it was made free to use. I spent hours to make a design that would be clean, simple, yet attractive. I finished my work at evening and finally exported the whole design as SVG. This was what I made using tutorials from YouTube:

Never before I was so happy. I would usually stick around with Android Studio’s design editor and thought it was good enough and now after working with XD, this idiotic thought is changed. I’m gonna use it again and again!

What after design? 🎨

Now, the next thing was to animate this. Not every element but only the monitor and those three chat bubbles. So, the monitor first animates, then the chat bubbles in order of the conversation. You can see there is a graph like something in the background, this represents that you can make graphs for the Bitcoins stuff (this is also shown to the right inside the monitor in colors) and the monitor itself shows what will be the interface of the application when you’ll enter the dashboard. Then there are chat bulbs also to the left inside the monitor showing that you can collaborate with others and some of the chat snippets are shown as a bubble which animate individually on the border of the monitor.

What will I make?

This:

Not this:

What’s a landing page❔

I didn’t knew what I was watching from years in which a company tells us about their product was actually termed as a landing page. And when I did heard the term the first thing that came to my mind was the GIF of the airplane that’s featured in this article. Huh.

What exactly ‘landing page’ means?

Have faith in WebDuck Designs. They say:

A landing page is a web page that appears when a visitor clicks on a PPC ad or a search engine result link. The home page of a website is not the only landing page; every page in a website has a purpose and is a potential search engine landing page.

Okay, so now we know that’s it’s related to SEO…okay, cool. Let’s not go deep into this and start landing those elements on our webpage!

What will I need? 🛠️

• H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
• Your already wonderful HTML and CSS skills.
• A text editor (I’ll be using VS Code just because for my last tutorial for CSS I used Atom…)

Shall we…land?

Start by creating a project folder named ‘Landing Page Animation’. As always, we’ll structure our webpage. In our index.html file we have:

• A div container with an id of home-container
• We’ll use nested containers here (or a container within another container, Inception? Let’s write inner container as <div id=”inner”>
• The second child of the home-container will have an id of illustration

Now let’s see what each of them actually contain:

• The inner has the <img> logo for our website which is awkwardly named CRYPTO, a header <h1> which says our product’s name (which is awfully awkward), Crypto + Chat = Crypts, a tagline for product which comes with a <p> tag having a class of subtitle and finally a call to action (cta) link tag which says Login or signup.
• The illustration container has all the SVG images with corresponding classes given to them. This includes the monitor and the chat bubbles with their respective icons.

At last, this will be our HTML file:

We’re now ready to rock and roll the landing page!

In our style.css file, we need to have the following properties:

• animation: for the monitor id, assign a keyframe animation name as monitorIn, duration of 1s, animation type of ease-in-out and animation direction as forwards.
• @keyframes monitorIn: next, use the keyframe rule of from to in order to transform and define translation along Y-axis only, setting the opacity accordingly.
• @keyframes chatblips: for the chatblips keyframe which is used in out three chat icons, I've used the bounce-in animation sample taken from Angry Tools website. This uses the CSS scale() function to resize the element on 2D plane.

And it’s done! Make sure you’ve landed properly on the W3School’s tutorial for animations to understand the concept thoroughly. If you’re struck, then you can simply experiment on the properties and values. Honestly, the ease animations do most of the job to make a landing page animation. Kinda smooth… Here’s the complete style sheet:

Where to next? 🤔

I always believe in experimenting. Incorporate newest animation properties, use a library or two (with or without JS), and have fun by changing the values to a ridiculous amount. There are a plenty of animation stuff that you can do with CSS, here is a great website which tells you about the same. Try to use the code given there and make something of your own and yes, don’t forget to use XD, I’m just loving it now.

Wait, just see this video:

The source code for this project is hosted on GitHub:

See the LIVE demo of this tutorial here.

Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.