A brief introduction to animation on the web
First and foremost animations should serve a puporse and enhance your story. When we’re talking about animations in user interfaces - not animated film - they should subtle and not disturbing. They should be fast and they should clarify the intent of the user.
Both CSS and JavaScript provide methods to animate elements. You can animate DOM elements directly or you could choose to use Canvas or WebGL.
You can combine the methods, you can make use of libraries to speed up the process and hopefully make it easier for you to develop.
As of this writing, animation on the web is still a fairly new topic and there’s a lot of catching up to do before we reach the levels of the professional tools already available to game designers or special effects crews.
Easings
Easings, or timing functions, are what make or break a great animation. Choosing the right easing is important, take your time to consider what makes sense for your animation. Is the panel sliding in? Just an easing that is initially fast and then slows down. Is the panel wooshing out? Choose a slow->fast easing.
- https://medium.com/motion-in-interaction/animation-principles-in-ui-design-understanding-easing-bea05243fe3#.g9fl7lgms
- https://developers.google.com/web/fundamentals/design-and-ui/animations/the-basics-of-easing?hl=en
- http://greensock.com/ease-visualizer