window.onload = function () {

    var master = new TimelineMax({delay: 0.25});
    TweenMax.set('.container', {visibility: 'visible'});

    master
    .to(['.green_shape', '.green_mask'], 1, {attr: {width: 167}, ease: Power3.easeInOut}) 
        .to('.yellow_shape', 1, {attr: {x: '+=87'}, ease: Power3.easeInOut}, '-=1')   
        .from('.txt1', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=0.75')

    .to(['.green_shape', '.green_mask'], 1, {attr: {width: 80}, ease: Power3.easeInOut}, '+=1') 
        .to('.txt1', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=1')
        .to(['.blue_shape', '.blue_mask'], 1, {attr: {x: '-=87', width: 167}, ease: Power3.easeInOut}, '-=1')
        .from('.txt2', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=0.75')

    .set('.yellow_shape', {attr: {x: '-=94', width: 0}})
    .set('.yellow_mask', {attr: {width: 167}})

    .to('.blue_mask', 1, {attr: {x: '+=167'}, ease: Power3.easeInOut}, '+=1')
        .to('.txt2', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=1')
        .to('.yellow_shape', 1, {attr: {x: '+=7', width: 160}, ease: Power3.easeInOut}, '-=1')
        .from('.txt3', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=0.75')

    .to(['.yellow_shape', '.yellow_mask'], 1, {attr: {width: 80}, ease: Power3.easeInOut}, '+=1')
        .to('.txt3', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=1')
        .to('.blue_mask', 1, {attr: {x: '-=80'}, ease: Power3.easeInOut}, '-=1')

    .to('.shape', 1, {attr: {y: 177, height: 8}, ease: Power3.easeInOut})
    .from('.pic_mask', 1, {attr: {y: '-=167'}, ease: Power3.easeInOut}, '-=1')
        .from('.logo', 1, {autoAlpha: 0, ease: Power3.easeInOut}, '-=0.75')

        .from('.txt4', 2, {autoAlpha: 0, ease: Power2.easeOut}, '-=0.5')
        .from('.txt5', 2, {autoAlpha: 0, ease: Power2.easeOut}, '-=1.5')

        .from('.cta_btn', 1, {x: '-=88', ease: Power3.easeOut}, '-=1.5')
    ;

    var video = document.getElementById('video');

    document.getElementById('container').addEventListener('mouseenter', function () {
        video.play();
        video.autoplay = true;
        video.controls = true;
    });

    document.getElementById('container').addEventListener('mouseleave', function () {
        video.pause();
        video.autoplay = false;
    });

    video.addEventListener('ended', function () {
        this.currentTime = 0;
    });
};