Skip to content

CSS-Trick: Clipping reveal for fade in left or right in WPBakery

/*ADD CLIPPING REVEAL FOR FADEIN ANIMATIONS*/
.wpb_animate_when_almost_visible.wpb_fadeInRight.animated img,
.wpb_animate_when_almost_visible.wpb_fadeInLeft.animated img {
    -webkit-clip-path: inset(0 -1px 0 -1px);
    clip-path: inset(0 -1px 0 -1px);
}
.wpb_animate_when_almost_visible.wpb_fadeInRight img {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transition: -webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s,-webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
}
.wpb_animate_when_almost_visible.wpb_fadeInLeft img {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: -webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s,-webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
}

Might wanna use in cinjunction with the testimonial effect:

/*TESTIMONIALS
.testimonial-entry-content {
    font-weight: 400;
    font-size: 34px;
    line-height: 1.294em;
    font-family: Marcellus,serif;
    color: var(--qode-main-color);
    margin: 25px 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;

    background-color: transparent !important;
    border: transparent !important;
    padding:0;
}
.testimonial-caret {
    display:none;
}
*/

.owl-item {
    opacity: 0;
    transition: opacity .4s cubic-bezier(0,.55,.45,1);
}
.owl-item.active, 
.owl-item.cloned.active {
    opacity: 1;
    transition: opacity .4s cubic-bezier(.55,0,1,.45);
}

Dieser Beitrag hat 0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

An den Anfang scrollen