Hello @Stagnax Here's my solution...
What I've done is I made an extra layer of black in the background of your rotating elements.
div#black {
background: black;
position: absolute;
height:100vh;
width: 100vw;
}
and then add z-index to your row so it will be in the top of the whole show...
div#row {
z-index: 100;
}
and here's how I setup the whole show...
window.onload = init;
function init() {
var canvas = document.getElementsByClassName('rot');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
TweenMax.set("#black", {opacity: 0, onComplete: animation});
}
function animation() {
TweenMax.to("#row", 3, {rotation:-90, onComplete: revealBlackBG});
}
function revealBlackBG() {
TweenMax.to("#black", 1, {opacity: 1, ease:Linear.easeIn});
}
I hide first the black layer and then after the animation done you eventually show it at the end...
Let me know if it is really helpful...