.fade-in {
    opacity: 1;
}

.slide-in {
    opacity: 1;
    transform: translateX(0) translateY(0);
}


.js-enabled { 
    
    .fade-in {
        opacity: 0;
        transition: opacity 1s;
    }

    .fade-in--triggered {
        opacity: 1;
    }

 
    .slide-in {
        opacity: 0;
        transition: opacity 1s, transform 1s;
    }

    .slide-in[data-axis="x"] {
        transform: translateX(var(--slide-in));
    }

    .slide-in[data-axis="y"] {
        transform: translateY(var(--slide-in));
    }

    .slide-in[data-axis="x"],
    .slide-in[data-axis="y"] {
        &.slide-in--triggered {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }

        &.slide-in--triggered__your-class {
            transform: translateX(0) translateY(-50px);
        }
    }
}