.webp)
Vertical Slider
Clonable
Learn how to create a responsive vertical split slider in Webflow with this clonable. The Full Page Split Vertical Slider is a visually striking and interactive element that can be added to your Webflow site.
Vertical Split Slider
<script>
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
var onScroll = debounce(function(direction) {
if (direction == false) {
$("#arrow-right").trigger('tap');
} else {
$("#arrow-left").trigger('tap');
}
}, 200, true);
</script>
view more

Learn how to use a CSS clip-path and GSAP to create an unmasking scrolling transition.

Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.

Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.