There are many great code snippets in their Gitlab. You might find more on their…
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