.block-revealer {
    /* transition: unset!important; */
}

/* @keyframes lr {
    0%   { transform: scaleX(0); transform-origin: 0% 50%; }
    20%  { transform: scaleX(0.5); transform-origin: 0% 50%; }
    40% { transform: scaleX(1); transform-origin: 0% 50%; }
    60%   { transform: scaleX(1); transform-origin: 100% 50%; }
    80%  { transform: scaleX(0.5); transform-origin: 100% 50%; }
    100% { transform: scaleX(0); transform-origin: 100% 50%; animation: unset; }
}

.de_reveal_curtain_direction_lr .block-revealer__element {
    transform: scaleX(0);
    transform-origin: 0% 50%;
    background-color: red;
    animation-name: lr;
    animation-duration: 1s;  
}

@keyframes rl {
    0%   { transform: scaleX(0); transform-origin: 100% 50%; }
    20%  { transform: scaleX(0.5); transform-origin: 100% 50%; }
    40% { transform: scaleX(1); transform-origin: 100% 50%; }
    60%   { transform: scaleX(1); transform-origin: 0% 50%; }
    80%  { transform: scaleX(0.5); transform-origin: 0% 50%; }
    100% { transform: scaleX(0); transform-origin: 0% 50%; animation: unset; }
}

.de_reveal_curtain_direction_rl .block-revealer__element {
    transform: scaleX(0);
    transform-origin: 100% 50%;
    background-color: red;
    animation-name: rl;
    animation-duration: 1s;  
}

@keyframes tb {
    0%   { transform: scaleY(0); transform-origin: 50% 0%; }
    20%  { transform: scaleY(.5); transform-origin: 50% 0%; }
    40% { transform: scaleY(1); transform-origin: 50% 0%; }
    60% { transform: scaleY(1); transform-origin: 50% 100%; }
    80%  { transform: scaleY(.5); transform-origin: 50% 100%; }
    100% { transform: scaleY(0); transform-origin: 50% 100%; animation: unset; }
}

.de_reveal_curtain_direction_tb .block-revealer__element {
    transform: scaleY(0);
    transform-origin: 50% 0%;
    background-color: red;
    animation-name: tb;
    animation-duration: 1s;  
}

@keyframes bt {
    0%   { transform: scaleY(0); transform-origin: 50% 100%; }
    20%  { transform: scaleY(.5); transform-origin: 50% 100%; }
    40% { transform: scaleY(1); transform-origin: 50% 100%; }
    60% { transform: scaleY(1); transform-origin: 50% 0%; }
    80%  { transform: scaleY(.5); transform-origin: 50% 0%; }
    100% { transform: scaleY(0); transform-origin: 50% 0%; animation: unset; }
}

.de_reveal_curtain_direction_bt .block-revealer__element {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    background-color: red;
    animation-name: bt;
    animation-duration: 1s;  
} */

/* EASING */
/* .de_reveal_easing_linear .block-revealer__element {
    animation-timing-function: linear;
}

.de_reveal_easing_ease .block-revealer__element {
    animation-timing-function: ease;
}

.de_reveal_easing_easeIn .block-revealer__element {
    animation-timing-function: ease-in;
}

.de_reveal_easing_easeOut .block-revealer__element {
    animation-timing-function: ease-out;
}

.de_reveal_easing_easeInOut .block-revealer__element {
    animation-timing-function: ease-in-out;
}

.de_reveal_easing_swing .block-revealer__element {
    animation-timing-function: cubic-bezier(.02, .01, .47, 1);
}

.de_reveal_animation_yes .block-revealer__content {
    opacity: 0;
} */