Nicola Cogotti

Co-Founder at Alpha Cogs

02 August 2018

A quick overview of the key concepts of Google Material Design combined with Greensock . Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science. GreenSock is a JavaScript framework which makes it easy to animate HTML elements and it is a perfect match with Material Design material vision

During the many years I have been working, I have been exposed to almost all the possible technologies, platforms and coding languages that a person working in the IT sector can possibly think of.

It happened that I was working (and I am still working) on a personal project and I wanted to use this opportunity to experiment all those technologies that for one reason or another I never had a chance and time to try.

Chatting with one of my friends I came to know about two very interesting technologies: Materials Design and GreenSock. This is how I decided to study and adopt them for my personal project and here I am to give you my first (as I still am on my way to learn them) impression.

I have to say I have been very impressed with both of them and I found myself many times at home running the code just to see the results I had with them.

 As per definition Material Design (codenamed Quantum Paper) is a design language developed by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design (M.D.) makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that, "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink.

There is a project for Angularjs at this link that looks very interesting but I decided not use it as it is still in RC. Looking around I found another project based on Bootstrap that follows the same concepts of M.D. but is more controllable (if you are familiar with Bootstrap) and also gives the opportunity to decide to which elements apply the material design concepts.

I found this project very promising and, mainly for the freedom and control it offers, I have decided to give it a go and use it.

The project I am referring to is Material Design for Bootstrap. This project is also not fully completed but, as I said, if you are familiar with Bootstrap  and Angularjs it is very configurable and easy to use. In other words, it was a great compromise for me to get closer to the Material way of thinking the UI and it is in my plan to contribute to M.D. for Bootstrap as it is not being designed to work with Angularjs natively.

Using this library the developer is almost forced to use directives for all the components that will be using M.D. in order to isolate properly the library and make it work with Angularjs without (almost) any struggle. It may sounds like a limitation but actually it is not, as this is the proper "Angular way" to structure the project and will be the only way to use Angularjs 2 as controllers will be completely dismissed.

The thing I loved the most about M.D. coming from bootstrap is the feeling of general order and clearness of the UI in perfect Google style.

The main goal of M.D. is to create a visual language that synthesises classic principles of good design with the innovation and possibility of technology and science.

The user understands the need to interact with something not because of crazy animations or strange colours but simply because of the light that the object has. Shadows in M.D. have a very big importance and they are used to drive the attention of the user to particular objects.

M.D. does not want to eliminate animations or colours from the UI (actually there is the offer of a large number of colours and animations for every component) but these are intended to be used to beautify the application, not to distract the user from the content. For example, a button can be completely flat and get a 3D effect only on the mouse over event (maybe because it is a button in an article that gives more information about what we are reading without taking the attention of the reader away from the content) or it can be a main button (a submit button or an action button), in this case different colours and deepness (thanks to the shadows) can be given to it.

Flat button before mouse over event;

 Flat button with mouse over event:

The animations are still very important in M.D. but all of them are meant to emphasise the content, not to distract the user from it.

The main concept to keep in mind is that motion provides meaning.

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

All actions take place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganise.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

Let's see a couple of  the most famous animations:

The ripple effect that can be applied to almost anything (but in particular to buttons) and gives the feedback to the user that an action has been started.

Ripple effect example:

The floating labels are animated labels inside text boxes. At the beginning they (the labels) look like place holders but when the user start typing, they change colour and move to the top left corner of the text field instead of disappearing, keeping the user informed  about the meaning of the field he or she is interacting with.

Text field with floating labels before typing:

Text filed with floating labels while typing:

 

 

Another very important thing is that animations are started by the user and never imposed on him or her. This is perfectly in line with the fact that it is not the animation that drives the user attention but the content and its physical characteristics.

This is because the user's eye is instinctively attracted by movements (especially when he/she does not expect them) and this may result in user focusing on the last object that moved and forgetting all the rest. In other words, the developer must be in complete control of animations, use them to emphasise the content and let the user know when to expect them.

This is the main reason I have been interested by GreenSock.

GreenSock is a javascript library that offers powerful tools to create and fully control animations.

After including the required javascript files we will have access to different objects: 

TweenLite, TweenMax, TimelineLite and TimelineMax.

The first two objects offer all the functions to create and manipulate objects. They offer pretty much the control on every single CSS property giving the full control of animations to the developer and letting him/her decide what will happen on the screen.

TweenLite offers the core functions while TweenMax is an extension that allows to create 3D animations and more. They are maybe the most interesting ones as they use directly the GPU's client machine and not the CPU. The result is a nice and smooth experience for the user that can see a 3D animation at 60 fps without killing the CPU. The result is great even on portable devices.

The other two objects I have named (TimelineLite and TimelineMax) are two sequencing tools to control the execution of animations created with TweenLite or TweenMax.

The concept is very familiar to everyone coming from WPF/Silverlight that have used Blender to create animations. Animations are "placed" on a Timeline where we can decide when to start, pause, repeat, change the speed and the delay of them.

It is really these two tools that make the developer completely responsible of what is happening on screen by creating and orchestrating animations between objects.

Using GreenSock we will obtain fluid and clean (visually speaking) animations that do not lag during their execution. The result is a nice feeling of continuity on the screen.

The most interesting part of the library though is the control that it gives to us, making it particularly effective with the concepts of M.D.

Another advantage of GreenSock is its integration with Angularjs and its animation framework.

Usage of both GreenSock and ngAnimate framework is a powerful tool to create almost everything we can possibly think of in terms of animations and fully control them.

One of the best practices is to create animations in directives defining their own behaviour. Do not create animation in controllers. If you are using M.D. (but also if you are using just Angularjs) the animation is something that defines the object. It is something that belong to it. The animation becomes an object property, so the only place where it makes sense defining it is inside the object itself.

To learn more about this library please visit their website, where you will be able to see many tutorials and demos ( the Star Wars one is fantastic but you will need to have a good GPU for it). 

This is all for now, and I may come back to these two libraries in the future as I am still on my way to fully learn them. Every time I code using GreenSock and M.D. for bootstrap I learn something new.

It is also in my plans to actively contribute to Material Design for Boostrap because I think is a great library and very enjoyable to use.

A special thanks goes to Remi Borgniet who first mentioned GreenSock to me (and he is very jealous that I got to use it before him :))