TagUX Design

After Effects to CSS 3D workflow – Part 3 – Finalisation

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

Part 3: JS finalisation and enhancements

Javascript

JSON Loading

Let’s start with the JSON file, generated by the JSX script in After Effects. The JSON object contains 2 arrays : targets and sprites3d. All of them store objects defining names, positions and rotations of the 3D elements in the scene.
Get back the main.js file seen in the first part and modify some code. It should have the scene creation, targets and controls only when the JSON file is completely loaded and parsed.

Continue reading

After Effects to CSS 3D workflow – Part 1 – Introduction

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

© 2018 Turbodrive Blog

Custom theme based on Wilson by Anders NorenUp ↑