#section1 {
    opacity: 0.1;
    -webkit-transform: TranslateX(-5%);
    -moz-transform: TranslateX(-5%);
    -ms-transform: TranslateX(5%);
    -o-transform: TranslateX(5%);
    transform: TranslateX(5%);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width: 100%;
}

#section1.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

#section2 {
    background-image: linear-gradient(to left, rgb(0, 0, 0), rgb(0, 0, 0) 31%, #9c9c9c 31%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#clip2 {
    left: -30%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    width: 100%;
    position: absolute;
}

#clip2.visible {
    left: 0;
}

#clipbg2 {
    width: 100%;
}

#clip2text {
    opacity: 0.5;
    -webkit-transform: TranslateX(-33%);
    -moz-transform: TranslateX(-33%);
    -ms-transform: TranslateX(-33%);
    -o-transform: TranslateX(-33%);
    transform: TranslateX(-33%);
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    background: black;
    position: absolute;
    right: 10%;
    width: 30%;
}

#clip2text.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

#clip3text {
    color: white;
    background: black;
    position: absolute;
    right: 0;
    width: 40%;
    padding-right: 10%;
}