.scroll-anim {
    opacity: 0;
    transform: translateY(0);
    transition-property: opacity, transform;
}

.scroll-anim.is-visible {
    opacity: 1;
}

/* Animations */
.scroll-anim[data-anim-type="fade"] {
    transform: none;
}

.scroll-anim[data-anim-type="slide-left"] {
    transform: translateX(var(--distance, 30px));
}
.scroll-anim.is-visible[data-anim-type="slide-left"] {
    transform: translateX(0);
}

.scroll-anim[data-anim-type="slide-right"] {
    transform: translateX(calc(var(--distance, 30px) * -1));
}
.scroll-anim.is-visible[data-anim-type="slide-right"] {
    transform: translateX(0);
}

.scroll-anim[data-anim-type="slide-up"] {
    transform: translateY(var(--distance, 30px));
}
.scroll-anim.is-visible[data-anim-type="slide-up"] {
    transform: translateY(0);
}

.scroll-anim[data-anim-type="slide-down"] {
    transform: translateY(calc(var(--distance, 30px) * -1));
}
.scroll-anim.is-visible[data-anim-type="slide-down"] {
    transform: translateY(0);
}

.scroll-anim[data-anim-type="zoom"] {
    transform: scale(0.8);
}
.scroll-anim.is-visible[data-anim-type="zoom"] {
    transform: scale(1);
}

.scroll-anim[data-anim-type="rotate"] {
    transform: rotate(-10deg);
}
.scroll-anim.is-visible[data-anim-type="rotate"] {
    transform: rotate(0deg);
}