Welcome to the main page of the article CSS 3D transitions workflow using After Effects.

Here is a new version of the article I’ve started writing in august 2014.
After thoughts, I’ve decided to retake this topic from the beginning and make it more clear and better balanced. In this way there is more code, diagrams and I hope, I’m going straight to the point.

Purpose

This article in 3 parts introduces a workflow making easier the setup of scenes and transitions made with CSS 3D Transforms. I’ve tuned-up this process to figure out two needs :

  • Transitions between pages with a 3D camera
  • Controlling these transitions using the touch screen of devices when available

Basically, this solution answers 3D UI/UX needs for mobile devices. Although, you’ll see you can easily increase the field of this workflow.

Scene used as example for the AE to CSS workflow

I’m gonna show you how to use Adobe After Effects as a tool for setting up a 3D CSS Scene with camera transitions. As well, even you can use this “as is”, you’ll learn that this workflow and the exchanges between AE and JS are appropriate for a bunch of enhancements.

Outline

Read the complete article by following the 3 parts :

  1. Introduction and CSS
  2. After Effects transposition and JSON export
  3. JS finalisation and enhancements

I hope you’ll enjoy it. Feel free to leave a comment.