AE to CSS Workflow - Part 3 - Finalisation Javascript and enhancements.

main_easeinterpolatefunc_excerpt.js

var easeInOutExpo = function (t, b, c, d) {
  if ((t/=d/2) < 1)
    return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
};


var getValueForProp = function(propName){
  if(globalCamProgression == parseInt(globalCamProgression)){
    return -targets3D[parseInt(globalCamProgression)][propName];
  }else{
    var t0 = Math.ceil(globalCamProgression-1);
    var t1 = Math.ceil(globalCamProgression);           
    var t = (globalCamProgression-(parseInt(globalCamProgression)));
    var b = targets3D[t0][propName];
    var c = targets3D[t1][propName]-b;
    var d = 1;
    return -easeInOutExpo(t,b,c,d);
    }
};

main_jsoncallback_excerpt.js

var jsonLoaded = function(jsonData) {
  targetPositions = JSON.parse(jsonData);
  // parse the JSON file
  targets = targetPositions.targets;
  // store the targets
  nbrTargets = targets.length;
  // get the number of pages
    
  createScene();
  createTargets();
  addControls();
}

main_perspective_excerpt.js

var getPerspective = function (focalLength, viewportWidth, filmWidth){
  if(filmWidth === undefined) filmWidth = 36;
  var cssPerspective = viewportWidth / (filmWidth/(focalLength)) 
  return cssPerspective;
}

var updatePerspective = function() {
  var perspective = getPerspective(28,viewportWidth)+"px";       
  stage.domElement.style.perspective = perspective ;
  stage.domElement.style["-webkit-perspective"] = perspective ;
}

main_rescalepage_excerpt.js

var updatePageScale = function(){
  var rX = viewportWidth/1280;
  var rY = viewportHeight/720;
  var scale = rX < rY ? rX : rY;
  for(var i = 0; i < nbrTargets ;i++) {
    targets3D[i].setScale(scale,scale,scale).update();
  }
}

main_resizepagecontent_excerpt.js

var updatePageSize = function(){
  // pageContent       
  var pages = document.getElementsByClassName("page");
  var face;
  var borderSize = 10;
  for(var i = 0; i < nbrTargets ;i++) {
    pages[i].style.width = viewportWidth + "px";
    pages[i].style.height = viewportHeight + "px";
    face = pages[i].getElementsByClassName("face")[0];
    face.style.width = (viewportWidth - (borderSize*2))  + "px";
    face.style.height = (viewportHeight - (borderSize*2)) + "px";

    //pages as sprites3D
    targets3D[i].setRegistrationPoint(halfViewportWidth, halfViewportHeight ,0).update();
  }
}

main_resizeviewport_excerpt.js

var resizeWindowHandler = function(e) {
  viewportWidth =  window.innerWidth;
  viewportHeight =  window.innerHeight;
  halfViewportWidth = viewportWidth>>1;
  halfViewportHeight = viewportHeight>>1;       
 
  stage.domElement.style.lef = halfViewportWidth;
  stage.domElement.style.top = halfViewportHeight;       
  stage.domElement.style["-webkit-transform-origin"] = String(Number(halfViewportWidth)) + "px " + String(Number(halfViewportHeight)) + "px";       
  stage.domElement.style.width = viewportWidth + "px";
  stage.domElement.style.height = viewportHeight + "px";
  stage.setPosition(halfViewportWidth, halfViewportHeight, 0).update();
  var p = String(Number(-halfViewportWidth)) + "px " + String(Number(-halfViewportHeight)) + "px";
  stage.domElement.style["-webkit-perspective-origin"] = p;
  stage.domElement.style["-moz-perspective-origin"] = p;
  stage.domElement.style["perspective-origin"] = p;
  
  interactContainer.setPosition(-halfViewportWidth, -halfViewportHeight, 0).update();
}

// when the scene is created, manage the window resizing.
window.addEventListener("resize", resizeWindowHandler);
resizeWindowHandler();