.scroll-trigger {

}
.scrollfx {
    transition: opacity 1s ease-out, transform 1s ease-out !important;
    will-change: transform, opacity;
}
.scroll-trigger :not(.scrollfx) {
    transition: opacity 1s ease-out, transform 1s ease-out !important;
    will-change: transform, opacity;
}

.scrollfx.opacity {
    opacity: 0.1;
}
.scroll-trigger .opacity:not(.scrollfx) {
    opacity: 1.0;
}

.scrollfx.slide-up {
    transform: translateY(85%);
}
.scroll-trigger .slide-up:not(.scrollfx) {
    transform: translateY(0%);
}

.scrollfx.slide-from-left {
    transform: translateX(-85%);
}
.scroll-trigger .slide-from-left:not(.scrollfx) {
    transform: translateX(0%);
}
.scrollfx.slide-from-right {
    transform: translateX(85%);
}
.scroll-trigger .slide-from-right:not(.scrollfx) {
    transform: translateX(0%);
}

.scrollfx.flip {
    transform-style: preserve-3d;
    transform: translateZ(1000px) rotateZ(180deg);
    transform-origin: center center;
}
.scroll-trigger .flip:not(.scrollfx) {
    transform-style: preserve-3d;
    transform: translateZ(1000px) rotateZ(0deg);
    transform-origin: center center;
}