Welcome to the first part of the article about the After Effect / CSS 3D Transform transitions workflow : After Effects to CSS 3D workflow – Part 1 – Introduction.
Click here to see the main page of the article : http://www.turbodrive.tv/blog/css-3d-transitions-workflow-using-after-effects/

Part 1: Introduction and CSS

Pre-requisites

You need some (at least basic) knowledge to follow and apply comfortably explanations :

  • CSS 3 / Javascript
  • Adobe After Effects: UI, expressions and scripting
  • Tweening principle
  • Real-time 3D principle

I try to give details on tricky parts but don’t come back on basics. It already exists a lot a ressources about these topics on the internet. Take a look at the about page to get links for learning general stuffs like these. Despite that, if you need extra clarification or feel it should have few on some points of the article, drop a line in the comments!

Background

I’ve made the first version of this workflow when I thought about the adaptation of my Flash personal website Turbodrive in HTML5. The main ideas were :

  • have something close to the Flash version for the 3D transitions
  • take the occasion of the HTML5 to make the website mobile-compatible and take advantage of the touch screens to improve the user experience.

Scene used as example for the AE to CSS workflow

Compared to Turbodrive, I introduce here a simplified scene for the purpose of the example. In following the explanations you’ll be able to recreate this scene, and so, learn the workflow principles to make it your own.

Continue reading