tweening background color with ScrollTrigger

i've been admiring another award winning site https://elephant.is/ and managed to get a fairly decent transition using ScrollToPlugin (once I solved the state issue by wrapping the code in a javascript document.onload function). ScrollTrigger seems a bit less successful. There is an problem reversing the sequence going from red (section 3) back to purple (section 2) and the general "feel" isn't quite right. Not sure whether I should try using a "smooth scroll" so advice a

thanks zach, yes that post is the basis of what I have been working on to remove the FOUC. Updated codepen here: See the Pen WNwogem by rb1604 (@rb1604) on CodePen the animation is wrapped in a window.addEventListener("load") function and I added visibility: hidden to the body element and used autoAlpha on the tween.. it now animates smoothly from beginning to the end of the page and back again until it gets back to the first sec