Useful

2016.11.06

Meaningful transitions tutorial basing on material design motion choreography

In categories: Tutorials, Website development

Some time ago I got inspired by Googles material design and meaningful transition concepts. Since CSS3 has allowed us to build beautiful transitions and seamless animations we must also be very careful in using them. It is our responsibility in front of our users and it can either help to better understand, read and grasp the information or do the opposite.

If a client would enter your restaurant, you would take proper care of him e.g. show him his table, present the menu etc. On the web we have other options to guide the user that has arrived – one of them being visual guidance using proper and logical information entrance animations. If a user does an action, we want to give him both the feedback of his action and display the following information so that he feels that it was connected to his action.

View the demo or Download source

Meaningful transition setup – CSS + Bootstrap + Animate.css

We are basing our example on Bootstrap in order to handle responsiveness and we use Animate.css because it is a great library for CSS based animations and transitions. Tutorial consists of 3 cards than can be opened via clicking on it. After the card has been clicked, additional information is shown and loaded dynamically using Ajax.

You can see that our card consists of a close button that we reveal when the card is open, background color, an icon for the card and a button that opens the card itself. Please note that we do have a class “left” defined here – I will explain why later on.

The magic of motion – jQuery + jQuery UI + Transform2d.js

After clicking on a card we want to show the user that the current card opens up and what better way to do that than to create the feeling that we are immersing in it zooming in a large circle right from the center of the card.

In order to do the zooming effect – we are using CSS scale property, but since it is not so stable and reliable across browsers, we are adding additional jQuery plugin Transform2d.js in combination with jQuery UI that consists of Effects components which is needed to create the animation of the circle. We will also need to include jQuery library in order to handle the opening and closing of cards.

The JavaScript code above has got all of the comments and you can easily read what each line does and why is it there. This is the place where we are using Ajax to load the content of the open card and here we can see that we have class “right” to the dynamic content that is being loaded. This is why previously I mentioned we needed the class “left” defined – both these parts are loaded together and this is how we are aligning them side by side once they are visible.

View the demo or Download source

Other posts

Your thoughts

 

Latest work