Coding HTML5 animations & banners made easy

Through a case study, learn how to easily create animations for the web using HTML, CSS and Greensock JS library (GSAP).

This tutorial is mini project based where we will produce an HTML5 animated banner. Using a PSD file as asset, I will guide you through all the steps to exactly reproduce the banner in HTML before animating it. This tutorial will cover the following sessions :

- Export images from PSD,

- Organise folder by creating and linking HTML, JS, CSS files,

- Create HTML file,

- Style HTML elements by taking measurements from PSD,

- Animate the HTML elements using Greensock Javascript Library.

We will start by exporting the contents from the PSD, writing the HTML codes, adding CSS styles and finally use the Greensock Tweenmax library to animate the banner.

This course is for students who already have some basic knowledge about HTML, and wish to progress further by doing some more advanced styling and produce animations. If you don't have any HTML knowledge, you can still take the course and you will understand what it is all about. It will also help students reproduce an HTML document from a any PSD.