Scroll direction is wrong Locomotive scroll

Question

I'm trying to achieve same scroll effect as in this example.

Section2

As per docs I have added data-scroll-direction="horizontal" however its reversed, on scroll down it moving from right to left but should be other way around. Also am not getting how transform translateX / translateY can be controlled with js? What if I want to have a custom trajectory?

HTML:

<main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">
                        </div>
                    </div>
                </div>
            </section>
</main>

JS:

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      class: 'is-inview',
      smooth: true,
      getDirection: true
 

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      class: 'is-inview',
      smooth: true,
      getDirection: true
      // lerp: 0.1,
    });


      scroll.update();

/* !locomotive-scrollv3.6.1|MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
  position: relative;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


section {
  width: 100%;
  height: 100vh;
  padding: 1em;
  position: relative;
  background-color: #000000;
}

#rocket-ship {
  position: relative;
  font-size: 100px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    <main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">
                        </div>
                    </div>
                </div>
            </section>
</main>

Answer 1

The idea is that if an element moves horizontally with a positive data-scroll-speed then the element moves from right to left as you scroll down (and from left to right as you scroll up). This results in a diagonal movement across your view pane.

With a negative data-scroll-speed you get a diagonal from left to right.

In the linked example the element is rotated (<div style="top:33%;transform:rotate(15deg);"> in my demo below.

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      class: 'is-inview',
      smooth: true,
      getDirection: true
      // lerp: 0.1,
    });


      scroll.update();

/* !locomotive-scrollv3.6.1|MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
  position: relative;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.c-scrollbar:hover {
  transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

section {
  width: 100%;
  height: 100vh;
  padding: 1em;
  position: relative;
  background-color: #000000;
}

#rocket-ship {
  position: relative;
  font-size: 50px;
  color: white;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    <main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">right-to-left
                        </div>
                    </div>
                </div>
            </section>
             <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;transform:rotate(15deg);">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">rotate(15deg)
                        </div>
                    </div>
                </div>
            </section>
             <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="-15"
                            data-scroll id="rocket-ship">left-to-right
                        </div>
                    </div>
                </div>
            </section>
            
</main>