Dynamic Tweening Problem

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<div id="trigger0" class="spacer s0">Trigger0</div>
<div class="spacer s50"></div>
<div id="facebox1">
    <div id="facebox2">
        <div id="faces">
            <div id="boxes3d">
                <section>
                    <figure class="cube1 front"></figure>
                    <figure class="cube1 back"></figure>
                    <figure class="cube1 right"></figure>
                    <figure class="cube1 left"></figure>
                    <figure class="cube1 top"></figure>
                    <figure class="cube1 bottom"></figure>
                    <figure class="cube2 front"></figure>
                    <figure class="cube2 back"></figure>
                    <figure class="cube2 right"></figure>
                    <figure class="cube2 left"></figure>
                    <figure class="cube2 top"></figure>
                    <figure class="cube2 bottom"></figure>
                    <figure class="cube3 front"></figure>
                    <figure class="cube3 back"></figure>
                    <figure class="cube3 right"></figure>
                    <figure class="cube3 left"></figure>
                    <figure class="cube3 top"></figure>
                    <figure class="cube3 bottom"></figure>
                </section>
            </div>
        </div>
    </div>
    <div class="spacer s50"></div>
</div>

JavaScript

var spacers = $('.spacer');
var spacer0 = $('.s0');
var spacer50 = $('.s50');
var spacer25 = $('.s25');
var faceBox1 = $('#facebox1');
var faceBox2 = $('#facebox2');
var faces = $('#faces');
var boxes = $('#boxes3d');
var figures = $('#boxes3d figure');
var cubeOneFront = $('.cube1.front');
var cubeOneBack = $('.cube1.back');
var cubeOneRight = $('.cube1.right');
var cubeOneLeft = $('.cube1.left');
var cubeOneTop = $('.cube1.top');
var cubeOneBottom = $('.cube1.bottom');
var cubeTwoFront = $('.cube2.front');
var cubeTwoBack = $('.cube2.back');
var cubeTwoRight = $('.cube2.right');
var cubeTwoLeft = $('.cube2.left');
var cubeTwoTop = $('.cube2.top');
var cubeTwoBottom = $('.cube2.bottom');
var cubeThreeFront = $('.cube3.front');
var cubeThreeBack = $('.cube3.back');
var cubeThreeRight = $('.cube3.right');
var cubeThreeLeft = $('.cube3.left');
var cubeThreeTop = $('.cube3.top');
var cubeThreeBottom = $('.cube3.bottom');
var cubeFrontBgColor = '#cdb79e'; // bisque3 (ref: http://www.color-hex.com/color-names.html)
var cubeBackBgColor = '#8b7d6b'; // bisque4
var cubeRightBgColor = '#00008b'; // blue4
var cubeLeftBgColor = '#8a2be2'; // blueviolet
var cubeTopBgColor = '#cd3333'; // brown3
var cubeBottomBgColor = '#8b2323'; // brown4
var cubeFrontOpacity = 0.4;
//
TweenMax.set(spacer50, { height: '10vh' });
TweenMax.set(spacer25, { height: '25vh' });
TweenMax.set([faceBox1, faceBox2], { width: '100%' });
TweenMax.set(faceBox1, { maxWidth: 400 });
TweenMax.set(faceBox2, { position: 'relative', paddingBottom: '73%' });
TweenMax.set(faces, { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 });
TweenMax.set(boxes, {
    position: 'absolute',
    width: '100%',
    height: '100%',
    maxHeight: 800,
    transformOrigin: '50% 50% 0',
    //x: -100,
    z: -100,
    //perspectiveOrigin: '235px 75px',
    perspectiveOrigin: 'center center',
    perspective: 850,
    //rotationX: 45,
    //rotationY: -25,
    //rotationZ: 45,
    //transform: 'rotateX(0deg)...