.animate-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 600ms ease;
}

.animate-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* direction system */
.animate-dir {
    opacity: 0;
    transition: all 600ms ease;
}

.animate-dir.from-bottom {
    transform: translateY(40px);
}

.animate-dir.from-top {
    transform: translateY(-40px);
}

.animate-dir.is-visible {
    opacity: 1;
    transform: translateY(0);
}