- Please add the below code to your Additional CSS space under Appearance > Customize.
- Please also delete the CSS from the Additional CSS space on the above Row Layout so that you can edit the contents.
- Then you can delete this section of instructions.
.kadence-pin-zoom-section {
position: relative;
min-height: 220vh;
view-timeline-name: --pinzoom;
view-timeline-axis: block;
}
.kadence-pin-zoom-section > .kt-row-column-wrap {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: block !important;
}
/* image layer */
.kadence-pin-zoom-section .zoom-bg {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
clip-path: inset(32vh 36vw round 30px);
animation: zoom-bg-open linear both;
animation-timeline: --pinzoom;
animation-range: contain 0% contain 100%;
}
.kadence-pin-zoom-section .zoom-bg .kt-inside-inner-col {
height: 100%;
background-size: cover !important;
background-position: center center !important;
}
/* text layer */
.kadence-pin-zoom-section .kadence-column86288_48e957-fb {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.kadence-pin-zoom-section .kadence-column86288_48e957-fb .kt-inside-inner-col {
width: 100%;
}
/* text */
.kadence-pin-zoom-section .slide-left,
.kadence-pin-zoom-section .slide-right {
animation-timeline: --pinzoom;
animation-range: contain 0% contain 100%;
animation-fill-mode: both;
animation-timing-function: linear;
}
.kadence-pin-zoom-section .slide-left {
animation-name: slide-text-left;
}
.kadence-pin-zoom-section .slide-right {
animation-name: slide-text-right;
}
@keyframes zoom-bg-open {
from {
clip-path: inset(32vh 36vw round 30px);
}
to {
clip-path: inset(0 round 0);
}
}
@keyframes slide-text-left {
from {
transform: translateX(-55vw);
}
to {
transform: translateX(0);
}
}
@keyframes slide-text-right {
from {
transform: translateX(55vw);
}
to {
transform: translateX(0);
}
}