Vertical Slider

Clonable

QR code to Billie Tuitt's instagram, scan with phone
CMS Capabilities
Vertical Slider
Unusual Layout
Webflow Slider
[london baseD: 
00:00
]
[
Webflow 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

[video coming soon]
Vertical split slider
[
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

scroll
GSAP Clipping Mask Tutorial
[
GSAP Clipping Mask
]

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

Tutorial
[
GSAP Flip Change View
]

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.

Tutorial
[
Object Fit Videos
]

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.

[drag]