{"id":3929,"date":"2023-06-04T10:17:41","date_gmt":"2023-06-04T08:17:41","guid":{"rendered":"https:\/\/www.knowboard.de\/?p=3929"},"modified":"2023-06-04T11:18:22","modified_gmt":"2023-06-04T09:18:22","slug":"css-trick-clipping-reveal-for-fade-in-left-or-right-in-wpbakery","status":"publish","type":"post","link":"https:\/\/www.knowboard.de\/css-trick-clipping-reveal-for-fade-in-left-or-right-in-wpbakery\/","title":{"rendered":"CSS-Trick: Clipping reveal for fade in left or right in WPBakery"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>\/*ADD CLIPPING REVEAL FOR FADEIN ANIMATIONS*\/\n.wpb_animate_when_almost_visible.wpb_fadeInRight.animated img,\n.wpb_animate_when_almost_visible.wpb_fadeInLeft.animated img {\n    -webkit-clip-path: inset(0 -1px 0 -1px);\n    clip-path: inset(0 -1px 0 -1px);\n}\n.wpb_animate_when_almost_visible.wpb_fadeInRight img {\n    -webkit-clip-path: inset(0 0 0 100%);\n    clip-path: inset(0 0 0 100%);\n    transition: -webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;\n    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;\n    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s,-webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;\n}\n.wpb_animate_when_almost_visible.wpb_fadeInLeft img {\n    -webkit-clip-path: inset(0 100% 0 0);\n    clip-path: inset(0 100% 0 0);\n    transition: -webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;\n    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;\n    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s,-webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;\n}<\/code><\/pre>\n\n\n\n<p>Might wanna use in cinjunction with the testimonial effect:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*TESTIMONIALS\n.testimonial-entry-content {\n    font-weight: 400;\n    font-size: 34px;\n    line-height: 1.294em;\n    font-family: Marcellus,serif;\n    color: var(--qode-main-color);\n    margin: 25px 0;\n    -ms-word-wrap: break-word;\n    word-wrap: break-word;\n\n    background-color: transparent !important;\n    border: transparent !important;\n    padding:0;\n}\n.testimonial-caret {\n    display:none;\n}\n*\/\n\n.owl-item {\n    opacity: 0;\n    transition: opacity .4s cubic-bezier(0,.55,.45,1);\n}\n.owl-item.active, \n.owl-item.cloned.active {\n    opacity: 1;\n    transition: opacity .4s cubic-bezier(.55,0,1,.45);\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Might wanna use in cinjunction with the testimonial effect:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[1,74],"tags":[],"class_list":["post-3929","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-css","entry","no-media"],"_links":{"self":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/3929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/comments?post=3929"}],"version-history":[{"count":2,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/3929\/revisions"}],"predecessor-version":[{"id":3933,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/3929\/revisions\/3933"}],"wp:attachment":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/media?parent=3929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/categories?post=3929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/tags?post=3929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}