Scrollmagic - Changing body and div background color with multiple tweens

Question

The site I'm working on uses scrollmagic to fade the color of the active div (each set to size of the screen) from back to white as it scrolls down. I have it changing the div color as well as the body color for a more seamless transition. For some reason, the body background color is not changing on the first 2 scenes that fire, but it is on the last 2. I've included a codepen illustrating the issue. When you scroll down and fire the last 2 scenes, triggered by #blog and #contact, the body color gets set properly. But not with the first two triggers - #about and #portfolio.

Any suggestions?

HTML:

</div>
<div id ="about" class="container frame">


</div>
<div id ="portfolio" class="container frame">


</div>
<div id ="blog" class="container frame">


</div>
<div id ="contact" class="container frame">


</div>

JavaScript:

$(function() {

  var blockTween1 = TweenMax.to('#about', 1.5, {
    backgroundColor: '#000'
});
  var blockTween2 = TweenMax.to('#portfolio', 1.5, {
    backgroundColor: '#fff'
});
  var blockTween3 = new TweenMax.to('#blog', 1.5, {
    backgroundColor: '#000'
});
  var blockTween4 = new TweenMax.to('#contact', 1.5, {
    backgroundColor: '#fff'
});
  var blockTween5 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#000'
});
  var blockTween6 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#fff'
});


var controller = new ScrollMagic.Controller();


var containerScene1 = new ScrollMagic.Scene({
    triggerElement: '#about'
})
.setTween(blockTween1);

var containerScene2 = new ScrollMagic.Scene({
    triggerElement: '#about'
})
.setTween(blockTween5);

  var containerScene3 = new ScrollMagic.Scene({
    triggerElement: '#portfolio'
})
.setTween(blockTween2);

var containerScene4 = new ScrollMagic.Scene({
    triggerElement: '#portfolio'
})
.setTween(blockTween6);

var containerScene5 = new ScrollMagic.Scene({
    triggerElement: '#blog'
})
.setTween(blockTween3);

var containerScene6 = new ScrollMagic.Scene({
    triggerElement: '#blog'
})
.setTween(blockTween5);

  var containerScene7 = new ScrollMagic.Scene({
    triggerElement: '#contact'
})
.setTween(blockTween4);

var containerScene8 = new ScrollMagic.Scene({
    triggerElement: '#contact'
})
.setTween(blockTween6);

controller.addScene([
  containerScene1,
  containerScene2,
  containerScene3,
  containerScene4,
  containerScene5,
  containerScene6,
  containerScene7,
  containerScene8,

]);


});

http://codepen.io/anon/pen/OyMzQm

Answer 1

Well I figured it out. For whatever reason, I can't reuse the variables I define the Tween properties in. For 4 body transitions, I had to specify 4 unique variables, even if they are applying the same effect. So instead of just:

  var blockTween5 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#000'
    });
  var blockTween6 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#fff'
    });

It became:

  var blockTween5 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#000'
});
  var blockTween6 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#fff'
});
  var blockTween7 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#000'
});
  var blockTween8 = new TweenMax.to('body', 1.5, {
    backgroundColor: '#fff'
});

With appropriate extra scenes.