Sometimes you need to lock up a part of your website or application. Now there are 2 options, have a simple login form and call it a day or go all in with a fancy login screen with gooey loader. And today I have the latter for you, for free!
Animations and transitions
I love animation on the web. Sometimes I like them over the top just to add an extra wow factor. But most of the times animations just get in the way. There are use cases however where an animation could be beneficial. A login screen, for example, could benefit from animations. It can make your application feel more responsive. If the user has something to look at while in the background the login screen has submitted the data to the server. The user has not noticed any extra delays as the screen was just transitioning.
See the Pen Gooey loader with log in screen by Skippy (@Skippy) on CodePen.0
In the example there are several animations, this freebie is here to inspire you and maybe for you to use in your application. When the user has filled in the form, and clicked on the login button. The first animation will fire. The user is now done with the form , the animation will slide it out of view and fade it out. If the user has somehow done something wrong. You could animate the form back up and display an error.
Let’s say in our theoretical example the application has to download the profile, or tweak some settings or something. It has to do stuff in the background that can take up some time. To make this less obvious that is needs to do a lot, we can animate the window first before we show a loader. This way we can minimize the time needed for the actual loader.
All loading times in my example are arbitrary, as it is a fake login window. No back-end has been implemented.
Gooey loader
The gooey loader uses a special effect that is called a “Gooey effect”.
What it essentially does, is blurring an object so much that the object gets all spread out. Like this in the example below.
See the Pen MpwWya by Skippy (@Skippy) on CodePen.dark
If you place more circles next to each other, the blurring will start to overlap. If you add contrast to this, the shapes will blend together in a sort of slimy state.
See the Pen gmpOwQ by Skippy (@Skippy) on CodePen.dark
While this effect looks cool enough on its own, you can animate the circles to have a really cool effect.
Image taken from https://css-tricks.com/shape-blobbing-css/
This works with more than just circles as you can see in the loader, there is an subtle effect to the corners of the parts that are clipping. It looks like an elastic square with a circle bouncing inside trying to break outside of it. Here is a standalone version of the gooey loader.
See the Pen bqdGMb by Skippy (@Skippy) on CodePen.dark
Gradients are cool again
As you might have noticed browsing around on the web, gradients are cool again. Probably sparked by Apple’s design choices and the Duo tone images trend that Spotify started might have helped making a comeback. I hope we don’t go overboard again with them like the web used to use it last time it was “hip”.
Remember us? We were everywhere!
Meaningful animations
I’ve spoken about the animation in an earlier chapter but I wanted to point out that animations used in a meaningful way can help the user navigate your application. In the example provided you can see that everything comes from 1 element. The element the user was already looking at. It shrinks down and removes the elements not needed anymore. It shows a new line of text based on the new context. You can leave the loading text out if you want, but I liked it. The loader is essentially the users profile pic bouncing around ready to break out. When the application is done loading we transform the same element that was the loader to a circle displaying the logged in users profile pic.
This is more or less based on the philosophy of Google’s Material design. They even take it a step further. It’s a good read if you have some extra time.
How to use this
Just copy and paste it, no I am kidding. Before you can use this you need to integrate this with your existing login form. Every form is different and you need to use Ajax to talk to the backend, otherwise the page will refresh and the animations will not be playing along the proces.
In the code below there are several steps that are triggered by jQuery in the example, but in a real world situation it would be triggered by the callback of the server.
$( ".btn-login" ).click(function() {
$(".window").addClass("login"); //user has clicked
setTimeout(function(){
$(".window").addClass("success"); //The server has accepted the credentials
}, 10000);
setTimeout(function(){
$(".window").addClass("loggedin"); //user is now logged in, now you can load or display the application
$(".logintext").addClass("active");
}, 8000);
});
credits to Sergey Kupletsky for creating the Material design icon font.
0 Comments