.fade-up-header{

    animation: fade-out-up 1s reverse;
}

.fade-down-header{

    animation: fade-out-down 1s reverse;
}

@keyframes fade-out-up {
    from{
        transform: translateY(0px);
        opacity: 100%;
        /* scale: 1; */
    }

    to{
        transform: translatey(100px);
        opacity: 1%;
        /* scale: 0.5; */
    }
}

@keyframes fade-out-down {
    from{
        transform: translateY(0px);
        opacity: 100%;
        /* scale: 1; */
    }

    to{
        transform: translateY(-100px);
        opacity: 1%;
        /* scale: 0.5; */
    }
}

.fade-out{
    animation: fade-out 5s reverse;
}

@keyframes fade-out {
    from{
        /* transform: translateX(0px); */
        opacity: 100%;
        scale: 1;
    }

    to{
        /* transform: translateX(-100px); */
        opacity: 1%;
        scale: 0.5;
    }
}

.onscroll {
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}