Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Web animations using HTML/CSS and JS ( Greensock )

Yashin Soraballee, Developer / Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Videos (1h 8m)
    • Introduction to the course

    • Exporting images from Photoshop

    • Creating and linking the necessary project files

    • Building the first screen - part A

    • Building the first screen - part B

    • Adding the logo

    • Adding the photos

    • Finishing the last screen

    • Animating the banner - part A

    • Animating the banner - part B

    • Animating the banner - part C

    • Looping the banner


About This Class


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.






Reviews (0)

Yashin Soraballee

Developer / Trainer

Currently a Technical Project Manager in one of the production platform of Publicis Groupe in Mauritius. I have been working for the group for almost a decade where I got the opportunity to participate and deliver hundreds of challenging projects.
Being a coding enthusiast, I always keep myself updated with the latest technologies and development frameworks. I regularly produce experimental applications and websites as part of continuous Research & Development. Occasional freelance projec...

See full profile