Learn how to create an animated user interface using both GreenSock and CSS.
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 (a website builder will make this simple for you), and if you can enliven them with some CSS animation, all the better.
While building for the web, particularly when it comes to animation, you have to consider things like browser support and performance (decent web hosting will help here). 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. Got a lot of media to add? Back it up in cloud storage.
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.
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:
$(“.hover").mouseleave(
function () {
$(this).removeClass(“hover");
}
);
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
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:
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.
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.
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.
