Add UI animations to your site

Rss Bot · October 1, 2018

Most people see user interfaces daily, whether it's inside a mobile app or on a website, so it's important to get it right when creating them, and if you can enliven them with some CSS animation, all the better.

Explore the new frontier of CSS animation

While building for the web, particularly when it comes to animation, you have to consider things like browser support and performance. In this tutorial, we're going to walk you through two of the best solutions for creating UI animations and transitions.

We will be using a combination of CSS and GreenSock (GSAP). We are all aware of CSS but some of you may not be aware of the GreenSock platform. GreenSock is a JavaScript framework that enables you to easily create stunning animations with HTML elements using just a few lines of code.

Images and logos have particularly stood out a lot more over the last few years. How often do we use emojis rather than text? Mobile navigations seem to use icons rather than text and over time users come to know where each will take us. We are going to start by creating an animated navigation bar just using logos. When you hover over each one, it will animate to the final state, which will look similar to this screenshot.

UI animations: icons

We have the six navigation icons and one of them shows off what the hover state will look like once the animation is completed

Build the navigation

First of all, we will create a new index.html file and set up our navigation area along with six links. Each link will be made up of an icon taken from Ionicons. We will need to assign a class to each.

We won't be covering the full HTML or CSS document in detail but you can get the full code listing from GitHub.

Next, we will need to create a CSS file that's called style.css and then insert the following line of code to import Ionicons:

We will now set up the class navlogo for our navigation images inside the stylesheet. Here we will set up the position, height, font size etc.

Next, we need to set up the animation for our .navlogo element. Here we will create the rotation and transition effects, as well as changing the element colour on hover.

Finally, we will need to add an event that removes the hover class when the mouse is no longer hovering over our logos. This is to make sure that our logo comes out of its animation. Create a new JavaScript file called main.js and then enter the following code:

Our navigation is now ready to go, apart from adding some hyperlinks. We have managed to achieve this just by using CSS3.

Create and animate buttons on load

UI animations: animated buttons

The buttons will appear one by one with a one-second delay in-between. GreenSock enables you to do this with any HTML element

We will now add four buttons to our page and use the GreenSock library to slowly bring in each button, one after the other with a one-second delay. This will create a nice transition effect.

First, we will need to reopen the index.html file and create our button section using the code below:

We then need to set up a reference to the GreenSock library inside the <head> section.

Finally, we need to set up our animation. This will only take one line of code. StaggerFrom is a function that will stagger the start time of our element. In our brackets, we specify the name of the element. In this case it would be .anibutton. We also need to set a duration and in this case it is set to one second between each anibutton element.

Background and element colour transition

UI animations: colour transition

This is how the UI will look after the background and button transition from one colour to another

The next thing we are going to look at is transitioning the website background and buttons from one colour to another. We don't often come across this feature on websites, although it would definitely be interesting for things like accessibility or for web app preferences when the user might want to set their own colour scheme.

Make sure that you have a background colour and a border and text colour set up for your page in the style.css file.

Next, we will create a JavaScript function to set up our various GreenSock colour transitions.

We are going for more of a dark mode look here, so the background will be dark but the buttons will appear light. The first line of code will change the background colour to a darker variation over a period of three seconds. The second and third line will change the colour and border of the text to white over a period of three seconds.

Finally, we will need to call the changeBackground() function from one of our buttons found in the index.html file.

The project is now ready to run. Of course, you can go a lot further by adding new elements and changing the colour style for those, too.

This article was originally published in issue 309 of net, the world's best-selling magazine for web designers and developers. Buy issue 309 here or subscribe here.

Related articles:

View the full article

Sign In

Add UI animations to your site

Recommended Posts

Rss Bot 1

Build the navigation

Create and animate buttons on load

Background and element colour transition

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity