Locomotive Scroll - switching from horizontal to vertical and back

Question

I am using Locomotive-Scroll (https://locomotivemtl.github.io/locomotive-scroll/) for smooth and horizontal scrolling, it's easy and works well. However, I'd like to integrate a section of vertical scrolling as well.

Visual Explanation

I've tried lots of things, none of which works entirely. I face mostly three issues:

I don't understand why my solution works to a certain extent and I cannot find any tutorial on locomotive-scroll going further than adding the data-scroll property
I didn't find a way to change the vertical scroll direction from downwards to upwards
If I resize the window, locomotive scroll brakes and can only be restored by a reload

My current solution (I would consider myself a beginner):

const scroller = new LocomotiveScroll({
    el: document.querySelector('#scrollable'),
    smooth: true,
    direction: 'horizontal'
});

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 2vh;
}

.section {
    height: 100vh;

}

#section-one {
    width: 100vw;
}

#section-two {
    width: 400vh;
    background-color: blanchedalmond;
}

#section-three {
    width: 100vw;
}

.heading {
    font-size: 5rem;
    font-weight: 500;
    text-transform: uppercase;
}

.home__statement {
    width: 100vw;
    position: relative;
}

.heading.one {
    position: absolute;
    left: 10vw;
    top: 25vh;
}

.heading.two {
    position: absolute;
    left: 10vw;
    top: 35vh;
}

.heading.three {
    position: absolute;
    left: 10vw;
    top: 45vh;
}

#sticky-container{
    width: 100vw;
    height: 100vh;
    background-color: cadetblue;
}

.vertical-canvas {
    position: absolute;
    top: -300vh;
    height: 400vh;
    width: 100vw;
    background-image: linear-gradient(red, yellow);
}

.example-1 {
    height: 50%;
    width: 100vw;
    background-color:rgba(175, 18, 18, 0.3);;
}

.elem {
    width: 100px;
    height: 100px;
    background-color: cornsilk;
}

.example-2 {
    height: 25%;
    width: 100vw;
    background-color: rgba(46, 165, 46, 0.3);
}

.example-3 {
    height: 25%;
    width: 100vw;
    background-color: rgba(75, 92, 168, 0.3);
}

    <div id="scrollable" data-scroll-container>

        <section class="section" id="section-one" data-scroll-section>

            <div class="home__statement">
                <span class="heading one" id="statement__line-one">Some text blabla</span>
            <div>

        </section>
        
        <section class="section" id="section-two" data-scroll-section>

            <div id="sticky-container"
                data-scroll
                data-scroll-sticky
                data-scroll-target="#section-two"
                data-scroll-speed="-1">
                    <div class="vertical-canvas"
                        data-scroll
                        data-scroll-sticky
                        data-scroll-target="#section-two"
                        data-scroll-direction="vertical">
                        <div class="example-1" id="ex1">
                            <div class="elem"></div>
                        </div>
                        <div class="example-2"></div>
                        <div class="example-3"></div>
                    </div>
            <div>

        </section>

        <section class="section" id="section-three" data-scroll-section>

            <div class="home__statement">
                <span class="heading one" id="statement__line-one">Some text blabla</span>
            <div>

        </section>

score 3 · Answer 1 · answered Jul 08 '21 at 19:58

You Can't initialize both Horizontal Scroll and Vertical Scroll within the same [data-scroll-container]

For the things you want to achieve, you can do with gsap scrollTrigger but you have to implement scrollTrigger with locmotive

Than You can do whatever effect you want

Locomotive Scroll - switching from horizontal to vertical and back

1 Answers1