How To Make Your Web App Look More Like A Mobile App?

Hello, world! To be honest, sometimes even if I have to spend some time on a website I just get bored of their extreme simplicity and that drives me to more like on visually better websites. So, I wanted show you a nice entry animation that I implemented on my CS50x (Introduction to Computer Science) Final Project, which will help you to create more attractive web app.

LOGIN ANIMATION

Entry Animation for web application to make it look more like a mobile application!
Entry animation for a web application to make it look more like a mobile application!

The first thing the user sees on your website is generally the login page. So why not to make it a little bit more attractive and give a feeling for the user like “hmmMMMMMM, OKAY!” ?

NOTE: I created this with Python/Flask, but for the simplicity’s sake I will show you with only HTML, CSS, Bootstrap and Javascript codes. (Do not forget to add the necessary Bootstrap links on your project to get exactly the same results, check out the instruction here.)

Sooo…, let’s begin with creating a “main-container” and a “form-container” ;

The first form codes.

So with the code above we created a container that we will put everything inside and take it to the center in the further steps with CSS.

We also need two separated input elements for “email address” and “password”.

We also need to have a “submit button” which I used <button>…</button> tag to see it clearly, but you are always free to go with <input type=”submit”>. Aaand, we are done with HTML, kind of...

Now, when we open our result on live server (a great extension tool in VsCode !) we should see something like;

First result of the HTML codes
I know it’s not the best but at least we have something on our page -_- !

Let’s make it a little bit more attractive though, for that follow the steps below;

  • Create a styles.css file
  • Link it in HTML
  • Open your CSS file

Okay you are AWSOME! ;)

SO WHAT NOW ?

Center everthing on the page!

What I am doing here is to use Flex-Box to make the things easier for us. I did use display:flex for that. Then if you check your results on your local server you are going to see everthing in a “ROW”. Which is not we want.
To solve that problem we use “flex-direction:column” and everything becomes a list-style content again.

IMPORTANT: Once we use flex-direction the feature of the “align-items” is converted into the feature of “justify-content” and vice versa. That means, to center everything “vertically” we should use justify-content, and align-items for centering everything “horizontally”.

Centered content
Everything makes more sense now, thank you CSS!

Maybe we can play with the appearance of the image and the input bars now to make them look more realistic.

And the result is;

Wooah! Finally it looks like something. Okay now, we arrived to the confusing part…(Not confusing at all actually, ignore me :) )

Okay so what we want from the image is to “exist out of nothing” so we are going to play to role of God! (Just kidding, please do not get offended!).

But simply there will be nothing at first, and after some certain time the image will appear on the page and it will have an animation while appearing. We will need a couple more CSS codes and some Javascript codes for that. (DOM Manipulation).

HOW TO DO THAT?

Opacity Addition
Addition of opacity to dispappear them by default!

So we did a hocus pocus, to make them disappear by default. Because, these input bars and the submit button will show up once the image animation is DONE!

And I used “opacity” here, but you can always find another way to do it, maybe with “visibility:hidden;” property or etc.

Image CSS changes
Also set width and height of the Image to “0" !
  • Now you should see nothing on your page! Let’s dive into the interesting part.
  • So we want the image to appear after some time once we open the web app.

HOW TO DO THAT?

Javascript DOM Manipulation comes in here. Check out the codes carefully!

DOM Manipulation

WOOOW! WHAT’S GOING ON HERE!? Calm down dude, I will explain…

First, we added a <script></script> tag inside your <body></body> tag. (Or you can create a separate file and link it to your HTML)

Then, “window.setTimeout(func(){…}, time in milliseconds)”. If you want to know how setTimeout() works you can check it out from here!

FIRST MANIPULATION

window.setTimeout(function(){…}, 750);” this first code means, “Dude I am telling you to wait until 750 milliseconds passed. Once the time is passed, do the manipulation I set, inside the function, thank you!”

So, if you remember we set our image width and height to “0” . Now after 750 milliseconds I want it’s “witdh: 325px, and height:300px” so that I can see my image again.

So if you refresh your page now, you will see your image after 750 milliseconds. Since it is a really short time for humanity, we may not understand that delay but it is there do not worry! :)

SECOND MANIPULATION

window.setTimeout(function(){…}, 3100);” this second code means, “Dude I am telling you to wait until 3100 milliseconds passed after I opened the window. Once the time is over, do the manipulation I set, inside the function, thank you!”

So if you remember, we set the opacities as “0”, now we are telling them to be visible by setting them up to “1”.

Okay now once you refresh your page, you should be seeing your Image to come out in 750 ms and the form in 3100 ms in total.

NOTE: Here we used “login-password” for the password input, otherwise it does not show up on the page for some reason. And we added the same class to the HTML tag as well.

IMPORTANT: Here, 3100 milliseconds, also includes the first 750 milliseconds. They do not wait for each other and start from zero! So you should do some calculation for your own animation for further projects.

ANIMATION PART

Thus, we finished everything about the boring part now. Let’s have some fun!

Transition
Addition of transitions and transform !
  • Here, we added “transition” property which allows us to change the property values, over a given duration. Check it out!
  • We also added “transform” property which allows us to rotate our content.(We have not added it on the DOM Manipulation yet!) Check it out!

So with “transition: 2s, tranform 2s;” our transition “appearing” effect will take 2 seconds and also rotation of our logo will take 2 seconds to complete.

If you remember we used “window.setTimeout(function(){…}, 3100);” so after 3100 milliseconds (3.1 seconds) passed, our transition for “Input bars” and the “submit button” will appear in 1 second in total.

So, if we refresh our page and check what is going on, we will see a nice animation of the page appearing, input bars and the submit button. YAAAY IT WORKS!

Let’s Rotate The Image!

Transform
Addition of Transform and Shadow to the image!

Here, we added a “rotate(1440deg)” value to my tranform property once the 750 milliseconds passed. So my image will show up as it rotates for 1440 degrees to the right(since the value is positive.)

We also added box-shadow here cause I want it to appear as my image appears as well.

Now, when we refresh we will see this ;

Rotating
Rotating Animation!

Looks AWSOOOOME!

ONE MORE THING…!

Let’s make our inputs and button mobile as well to have a better action there!

Addition of margin-top

As a final touch, we added “margin-top” to have an effect like the input bar and the submit button is coming from below to a little bit more above. (If you check the CSS our margin-top values were more than 3% by default so now we are decreasing it and it gives the effect.)

And if we refresh;

Login Animation
Login Animation

It works! IT WORKS!!! :P

I hope this little tutorial works for you to have a better idea of using your own animation in your web apps which will look more like a mobile app now!
You can find the demo here!

THANK YOU!

--

--

--

Junior Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

It’s all in the SASS

iOS Conf SG - The passion of my life

The Number One Resource to Help You Pass AWS Exams

A building with Netflix sign in a city landscape.

Custom Workflows With External Users

Custom workflows for external users

The story of Hack Manchester 2017 and why I am thrilled to become runner up

Beginners guide to Microservices Architecture

Crowd Testing: opportunity or scam for testers?

Ensuring your business succeeds in trialing times

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hakan Yıldız

Hakan Yıldız

Junior Web Developer

More from Medium

How to build an accessible form with HTML5?

Mobile Responsive CSS Grid made easy!

Three design principles for your CSS layout

How to improve your HTML & CSS skills

A music player design with it’s corresponding tailwind css UI code