First of all, thank you for sharing this with the world! I am having an where I can't scroll if my mouse is over an iframe like an embedded youtube video. If I deactivate locomotive-scroll scrolling works as intended. Any ideas on how I can get around this scrolling issue?

Thank you!

Hi!

I've tested the demo on Firefox and Edge and there are some flickering issues. I think it happens because the translate3d is not an integer value but decimal.

Do you plan to fix this issue?

Thanks for the great work you did!

Wrapping every Nodelists with Array.from() would fix IE11 compatibility.

I'm using the data-scroll-call to know when some elements are in the viewport or not. This works fine and triggers an Enter/Exit event for all the elements in the middle of the page. However, when I apply data-scroll-call to the footer, only the Enter event will be triggered, but when I scroll back up and the footer is out of the viewport, the Exit is not triggered.

Any idea why?

Add 🚂 emoji to repo description. Repos with no emoji in their description are usually lame. This lib is 🔥

could you advise on if this is possible with this wonderful package.

https://pup.adamwright90.now.sh/

I've got it looping when scrolling up but can't get it looping when scrolling down. heres the code https://github.com/adamjw3/pup/blob/master/src/components/Scroller.js

Am i missing something?

Hi, want to destroy locomotive-scroll at a certain point (window width). Unfortunately my attempt isnt working. The Scroll Effect still works, even after stop and destroy.

My test looks like this. I load the Page in wider than 992px, then i decrease the window with. The console log destroy loco appears in the console. No Error Script Errors during that.

`

setTimeout(function() {
    var scroll;
    var scrollerActive;
    var breakPointMD = 992;

    if($(window).width() < breakPointMD){
        scrollerActive = false;
    }else{
        scrollerActive = true;
    }

    $(window).bind('load resize', function(){
        var windowWidth = $(window).width();
        if(windowWidth < breakPointMD){
            if(scrollerActive == true){
                scroll.stop();
                scroll.destroy();
                scrollerActive = false;
                console.log("destroy loco")
            }
        }else{
            scroll = new LocomotiveScroll({
                el: document.querySelector('#js-scroll'),
                smooth: true
            });
            scrollerActive = true;
        }
    });//end of resize/load
    
}, 100)`

I need a Scrollbar object on window. Because I need to migrate it to my existing project . So that we can still use a default api from smooth-scrollbar. Example

Scrollbar.get()
Scrollbar.getAll()

Hi there,

First of all, awesome stuff, I love it. I just found a little bug that is pretty annoying. When an element is set to sticky, if you scroll past it's wrapper and then you resize your browser, it's positioning gets all funky and it starts to stay sticked beyond it's wrapper dimensions. The bug is present on your demo page too. Scroll past the 04 Fixed elements section then open the console (or just resize your browser) and you'll see what I mean.

Thank you!

Hi there,

I'm using your locomotive-scroll library with smooth for my fullAjax website and i'm encountering a problem with the scrollbar when I'm browsing to another page. It's height (relative to the height of the page) is never updated.

When i browse to another page, i call the update () instance method but I cannot find any code to update scrollbar size inside this method.

So I manually update it like in your initScrollBar() method :

this.scrollbarThumb.style.height = `${(window.innerHeight * window.innerHeight) / (this.instance.limit + window.innerHeight)}px`;
this.scrollBarLimit = window.innerHeight - this.scrollbarThumb.getBoundingClientRect().height;

Is there another way to fixed this, or perhaps i do something wrong ?

Thank you 😄

Hey guys!

I was looking through the code, super nice work! I've seen a few lines where I think there might be some memory leaks when adding event listeners. When using an arrow function, it will create an anonymous function and therefore the event will not be removed.

When using the virtual-scroll module, you'll need to call this.vs.off(fn) before calling this.vs.destroy() and the function bind needs to be the same.

Instead of:

this.vs.on((e) => {})
this.vs.off((e) => {})

You should use something like this:

this.vs.on(this.event)
this.vs.off(this.event)

There is the same issue for the mouseup and mousemove functions:

window.addEventListener('mouseup', (e) => this.releaseScrollBar(e))
window.removeEventListener('mouseup', (e) => this.releaseScrollBar(e))

It should be something like this. You'll maybe want to create a function inside your class named onMouseUp, and call releaseScrollBar inside of it.

window.addEventListener('mouseup', this.onMouseUp)
window.removeEventListener('mouseup', this.onMouseUp)

Hope it helps!
Cheers 🍻

Hi,
im using the on Scroll Event because i need the ScrollY Position.

But it happens that sometimes pos Y becomes 0 during scrolling.

This is the Console.log

{x: 0, y: 1427.0303071238382}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1428.3272764114545}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1429.4945487703092}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1430.5450938932784}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1431.4905845039505}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1432.3415260535555}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1433.1073734482}
scripts.js?ver=1566283502:4157 {x: 0, y: 0}
scripts.js?ver=1566283502:4157 {x: 0, y: 1433.79663610338}

This is my Code

scroll = new LocomotiveScroll({
el: document.querySelector('#js-scroll'),
smooth: true,
smoothMobile: true,
inertia: 1,
repeat: true
});

scroll.on("scroll", scrollOnScrolling);

function scrollOnScrolling(obj){

    var scrollY = obj["scroll"]["y"];
    //console.log("functiona");
    //console.log( obj );
    //console.log( obj[0] );
    //console.log( obj["direction"] );
    //console.log( obj["limit"] );
    //console.log( obj["speed"] );
    console.log( obj["scroll"] );

Any Ideas how this can happen. I need the Y Position because i want to add an Class if Scrolling is bigger 50, now with this 0 sometimes. It ends in addclass, removeclass, addclass, removeclass,....

I am using javascript and jquery, how can i use locomotive-scroll library without npm install?

Hello 👋

anyway to loop the the content continuously?

had a go with a few demos but nothing solid

https://codesandbox.io/s/heuristic-resonance-0ybkl

https://codesandbox.io/s/young-wind-ozeeq

https://codesandbox.io/s/patient-darkness-6gxj1

Thank you 👊

Is there any way to make a specific section scrollable (ie: a selection list component) inside the main scrollable element?

I notice there is a transform matrix that updates as the scroller moves (notice in the DOM below).

Is there anywhere in the scroll object that I can get this value in real-time (for example, within the scroll event). When I log the scroll object I can see there are target deltas and such, but not the actual current value as far as I can tell? This would be useful for creating custom tweens or passing into other functions/libraries.

      const scroll = new LocomotiveScroll({
        el: document.querySelector("#view"),
        smooth: true
      });
      scroll.on("scroll", () => {
        console.log(scroll);
      });

https://codesandbox.io/embed/nervous-shadow-nedn7

Hello there!
I'm trying to install your Locomotive Scroll but I get the following error immediately:

npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/ayamflow/virtual-scroll.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Do I miss something? Thanks in advance.

Hi mate,
total newbie here. I am designer with little coding skills, but I like to stick my nose into things i don't understand and try to learn from mistakes.
I was able to run the script and know how to set up a few basic functions. everything works perfectly. i would love to know how to do something i saw on the web site that you make: carbonbeauty.com
the big title "Carbon Beauty...." goes horizontally to the left, but doesn't go up as I scroll. Is it possible to recreate something like that and how?
I hope you will help me as I have been stuck for a long time in solving this problem, though I would love to learn a lot more. For example, how to use data-scroll-sticky and other things.
it might not be a bad idea to do some more detailed documentation with more examples for people with learning difficulties like me.
Totally love your work, and thank you for sharing this amazing script with us, really appreciate it. :)
Cheers

Can i use scrollTo function for "scroll to top"? And how?

I've got it working with gatsby but have had to set a height of 0px to a wrapping div, without this the div with class scroll leaves a massive gap at the bottom on the page.

Anyone come across this? better way of fixing this?

`import React, { useEffect } from "react"
import locomotiveScroll from "locomotive-scroll"
import Footer from "./Footer"
import Navigation from "./Navigation"
import "../styles/site.scss"

const Layout = ({ children }) => {
const scrollRef = React.createRef()

useEffect(() => {
const scroll = new locomotiveScroll({
el: scrollRef.current,
smooth: true,
})
})

var divStyle = {
height: "0px",
}

return (

export default Layout
`

I get the following error when using locomotive-js as described in the Readme:

Uncaught SyntaxError: Cannot use import statement outside a module

My HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Locomotive Test</title>
  </head>
  <body>
    <div id="js-scroll">
      <h1 data-scroll>Welcome</h1>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

And the JS:

import LocomotiveScroll from "locomotive-scroll";

const scroll = new LocomotiveScroll({
  el: document.querySelector("#js-scroll"),
  smooth: true,
  getSpeed: true,
  getDirection: true
});

Hi,
Is it possible to set time duration to scroolTo?

In some cases, I'd like to have some control over the scrolling transform. It possibly could be a custom callback function on scroll with the translate value that I could use for added transforms.

I'm not having any luck getting any callbacks to work, anyone have any luck with this?

<div data-scroll-call="someIdentifier"><div>

scroll.on('call',(func)=>{
      console.log(func);   //nothing happens!
 })

Hi!
First of all, thank you for this neat library.

I'm using it with gatsby. I'm instantiating it in useEffect like this

const scroll = new LocomotiveScroll({
      el: scrollRef.current,
      smooth: true,
      smoothMobile: true,
    })

Then I create the ref

const scrollRef = useRef(null)

and assign it to my container

<div ref={scrollRef}></div>

So far so good, it works in development mode in gatsby (so gatsby develop).
The problem arises when I go to production, so with gatsby build.

WebpackError: ReferenceError: document is not defined

  - locomotive-scroll.esm.js:151 Module../node_modules/locomotive-scroll/dist/locomotive-scroll.esm.js
    node_modules/locomotive-scroll/dist/locomotive-scroll.esm.js:151:1
  
  - index.js:1 Module../src/pages/index.js
    src/pages/index.js:1:1
  
  - interopRequireDefault.js:7 Object.Module._extensions..js
    node_modules/@babel/runtime/helpers/interopRequireDefault.js:7:1

Any thoughts? Thank you!

Cheers.

Edit: I've found this, but It's not working, and this, but I'm not sure how to make it working with locomotive

Hi, awesome plugin. One of the issues I've found is that the thumb height of '.c-scrollbar_thumb' is not updated on window resizes. It happens on the test site as well.
I don't know if it's related, but the positions of the elements are not updated as well when resizing the window, only after you do a manual scroll. I tried calling scroll.update(), on a window resize listener, but it didn't work.

How do I get everything updated after resizing the window?
Thanks!

Hello guys, nice job with this lib!

Same as React, is there a way of using this library with Vue?
I've tried and failed multiple time 😢.

Would be awesome if someone could supply an example, just like the one with React that works perfectly!

Thank you!

Is it me or its not working on mobile ? https://locomotivemtl.github.io/locomotive-scroll/

Hi,

I stumpled upon on a strange problem. Some elements are missing the 'is-inview' class even if they in the current viewport. This problem happens only on initial viewport you see if the page has loaded. Only if I do a slightly scroll then they appear. This looks very messy if you have initial animations. Is there some workaround or something I should consider?

Here is a codesandbox where you can see that some elements get fadein only after you have scrolled: https://codesandbox.io/embed/locomotive-scroll-nuxt-init-anim-rcok0

Take this markup for example which gets loaded in the initial first visible viewport

  <section data-scroll-section>
      <div>
        <div class="a-fadein" data-scroll>
          <Logo :width="350"/>
        </div>
        <h1 class="title">
          NUXT
          <span class="green">JS</span>
        </h1>
        <h2 data-scroll class="subtitle a-fadein">Starter for CodeSandBox</h2>
        <!-- NOT visible on page load only on scroll... ! -->
        <div>
          <div data-scroll class="a-fadein">
            <p>TEST 1</p>
          </div>
          <div data-scroll data-scroll-speed="1" class="a-fadein">
            <h2>TEST 2</h2>
            <!-- NOT visible on page load only on scroll... ! -->
          </div>
          <div data-scroll data-scroll-speed="1" class="a-fadein">
            <h2>TEST 3</h2>
          </div>
        </div>
      </div>
    </section>

EDIT: This problem happens also in the official example here. But only on mobile phones for example here:

Hi, thanks for this great plugin first of all. It works great.

I wanted to see if it was possible to add a rotate transform based on the scroll position? For example, if I apply data-scroll-speed to an element, can I rotate it as well? Similar to what you do with the "video reel" button on this site: https://mathieulevesque.com/en

Thanks

Hi,

I need the horizontal scroll for a specific page and I tried to change the direction option to "horizontal" without any effect.

Could you give me some hints to have the horizontal scroll, like you did for this website?

https://homesociete.ca/

Thanks!

Hi! Amazing work. Is there any way to support IE11? I've tried to make it work with polyfill by integrate append and forEach but the page isn't scrolling

I noticed that the scroll on Firefox is too slow. Reading through the lib, there's firefoxMultiplier that should increase the scroll speed when firefox is detected.

Still, the scroll is too slow, and setting firefoxMultiplier like

const scroll = new LocomotiveScroll({
        el: scrollRef.current,
        smooth: true,
        smoothMobile: false,
        firefoxMultiplier: 100,
      })

does nothing.

Any solutions?
Thanks.

We are using Locomotive Scroll (LS) on a site that utilizes a page transition plugin. When we transition to a new page sometime LS doesn't allow the user to scroll all the way down. I'm guessing this has something to do with the page not fully loaded when LS is initialized. From what I can tell, the Locomotive site is similar. How do you all get around this obstacle. Any insights would be highly appreciated!

First, thanks for putting this out there. The demo page is great!

I am building a site using Gatsby JS, so everything is built with React.

I am initializing Locomotive Scroll once the component mounts. It initializes without issues - I get the has-scroll-init has-scroll-smooth classes on the body. Once I start my scroll I get the has-scroll-scrolling. However, when I stop scrolling that class doesn't disappear (like on the demo page). I also set some data attributes on a headline quickly to see if I could get that to scroll a different speed. Unfortunately, nothing happens. It doesn't set the class to is-inview or anything.

The code for my component is below. I'm assuming this is a Me issue, and hope somebody can point it out.

class ProjectTemplate extends Component {
  constructor(props) {
    super(props)
    this.wrapper = null
  }

  componentDidMount() {
    this.scroll = new locomotiveScroll({
      el: this.wrapper,
      smooth: true,
      getSpeed: true,
      getDirection: true,
    })
  }

  render() {
    return (
      <>
        <Helmet
          bodyAttributes={{
            class: "project-template",
          }}
        />
        <div className="project" ref={div => (this.wrapper = div)}>
          <div className="project__inner">

            <ProjectHero
              title={this.props.data.wordpressWpProject.title}
              roles={this.props.data.wordpressWpProject.acf.roles}
              platform={this.props.data.wordpressWpProject.acf.platform}
            />

            {/* <ProjectRoles roles={data.wordpressWpProject.categories} /> */}
            <ProjectAbout
              about={this.props.data.wordpressWpProject.acf.about_project}
            />
            <h1
              style={{ color: "black" }}
              data-scroll
              data-scroll-speed="3"
              data-scroll-position="top"
            >
              The Locomotive Scrolling Headline
            </h1>
            <ProjectImages
              images={this.props.data.wordpressWpProject.acf.more_images}
            />
           
          </div>
        </div>
      </>
    )
  }
}

Hi,

as far as I understand you should use the transition-delay property to time your animations correctly. What is the purpose of data-scroll-delay then? Or how I can interpret the meaning of lerp. Thanks!

Regards

Hi, I am trying to install locomotive-scroll via npm, but getting this error, what could be the problem?

air-ivan:xtremity.new vinokurov$ npm i --save locomotive-scroll
npm WARN [email protected] No repository field.

npm ERR! code EPERM
npm ERR! syscall spawn
npm ERR! errno EPERM
npm ERR! Error: spawn EPERM
npm ERR! at ChildProcess.spawn (internal/child_process.js:366:11)
npm ERR! at spawn (child_process.js:538:9)
npm ERR! at execFile (child_process.js:221:15)
npm ERR! at tryCatcher (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
npm ERR! at ret (eval at makeNodePromisifiedEval (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promisify.js:184:12), :16:23)
npm ERR! at promiseRetry (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/pacote/lib/util/git.js:192:14)
npm ERR! at /Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/promise-retry/index.js:29:24
npm ERR! { Error: spawn EPERM
npm ERR! at ChildProcess.spawn (internal/child_process.js:366:11)
npm ERR! at spawn (child_process.js:538:9)
npm ERR! at execFile (child_process.js:221:15)
npm ERR! at tryCatcher (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
npm ERR! at ret (eval at makeNodePromisifiedEval (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promisify.js:184:12), :16:23)
npm ERR! at promiseRetry (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/pacote/lib/util/git.js:192:14)
npm ERR! at /Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/promise-retry/index.js:29:24
npm ERR! cause:
npm ERR! { Error: spawn EPERM
npm ERR! at ChildProcess.spawn (internal/child_process.js:366:11)
npm ERR! at spawn (child_process.js:538:9)
npm ERR! at execFile (child_process.js:221:15)
npm ERR! at tryCatcher (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
npm ERR! at ret (eval at makeNodePromisifiedEval (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promisify.js:184:12), :16:23)
npm ERR! at promiseRetry (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/pacote/lib/util/git.js:192:14)
npm ERR! at /Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/promise-retry/index.js:29:24 errno: 'EPERM', code: 'EPERM', syscall: 'spawn' },
npm ERR! stack:
npm ERR! 'Error: spawn EPERM\n at ChildProcess.spawn (internal/child_process.js:366:11)\n at spawn (child_process.js:538:9)\n at execFile (child_process.js:221:15)\n at tryCatcher (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)\n at ret (eval at makeNodePromisifiedEval (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promisify.js:184:12), :16:23)\n at promiseRetry (/Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/pacote/lib/util/git.js:192:14)\n at /Users/vinokurov/.npm-global/lib/node_modules/npm/node_modules/promise-retry/index.js:29:24',
npm ERR! errno: 'EPERM',
npm ERR! code: 'EPERM',
npm ERR! syscall: 'spawn',
npm ERR! parent: 'xtremity.new' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/vinokurov/.npm/_logs/2019-09-16T00_10_18_408Z-debug.log
air-ivan:xtremity.new vinokurov$

Hi there,

I've noticed a small bug if you resize the window after having reached the bottom of the page. The transform value seems to exceed the new instance limit.
It's getting back to a normal behavior after scrolling again.

To reproduce the bug, simply scroll to the bottom of the page and then resize the window: https://locomotivemtl.github.io/locomotive-scroll/

Tested on latests Chrome (v78) and Firefox (v70) on Windows.

I've fixed this issue by updating the updateScroll method so that the the instance delta y property can't exceed the instance limit and by then calling transform to reset the position in case it happens, however I've not dug deeply enough in the code to be sure it's not just a dirty hack:

      key: "updateScroll",
      value: function updateScroll(e) {
        if (this.isScrolling || this.isDraggingScrollbar) {
          this.instance.scroll.y = lerp(this.instance.scroll.y, this.instance.delta.y, this.inertia * this.inertiaRatio);
        } else {
          // fix to avoid the limit to be exceeded on resize
          if(this.instance.delta.y > this.instance.limit) {
            this.instance.delta.y = this.instance.limit;
            // force transform to the max position (dirty hack?!)
            this.transform(this.el, this.instance.scroll.x, -this.instance.delta.y, 0);
          }
          this.instance.scroll.y = this.instance.delta.y;
        }
      }

(Edit: I was using v3.1.5, things may have changed by then)

Thank you very much folks for the awesome work!

Would be nice if we could get a solution to get the scroll object if we have a JS based routing system. Instead, we will be getting a one big scroll.on(call) with all the logic inside.

Is there any documentation or things to note while using this library with React or Gatsby? I see that you have a React boilerplate (https://github.com/locomotivemtl/locomotive-react-boilerplate) but it provides no insight into this as it's more of a stripped-down boilerplate.

By testing things my way on Gatsby there seem to be a couple of bugs that I believe could be caused by improper usage. So any ideas on using the library optimally would be appreciated. Far fetched but it'll also be great if you could add locomotive-scroll to the react boilerplate.

Hello there!
How can I use your locomotive-scroll in ES5? Is there a minimized ready-to-use version which I can initialize and destroy as I need?

Thanks in advance.

VirtualScroll takes a spacebar event to scroll down in portions, however this doesn't work very well when users need to type in text in input fields. Any possibly solutions for this?

i have two columns and when you scroll i want one to scroll in the normal direction and the other to move in the opposite. is this possible with this script?

Is there a way of using this library with React? How would I initialize and target components?
Would be awesome if you could supply a minimal setup example!

Thank you!

When listening to "call" event on a LocomotiveScroll instance, you expect to receive 3 params in the callback (value, way, obj).

If you use smooth scrolling, the "call" callback will receive a obj param. This object has a ID property. But if you use native scroll, this object doesn't have a ID property.

Can you add a ID property in Native.js -> addElements for each elements added to the scroll component?
Thanks :)

Hi! First off, thank you for your work, it's amazing!
I have trouble making scrollbar (.c-scrollbar) height less than 100vh, (let's say 80vh). I apply necessary CSS before script initialization, but the thumb translates related to window height anyway. Am I missing something? I need the thumb translation to respect the scrollbar container height.

It skips the very first scroll-wheel move. Second and later sequence work. Then, if paused for a moment - again skips first scroll move.

Checked in Chrome 75, Edge 18.

How to hang a handler on scroll?

var smoothScroll = new _ScrollManager2.default({
    container: $('#js-scroll'),
    selector: '.js-animate',
    smooth: true,
    smoothMobile: false,
    mobileContainer: $(document),
    getWay: false,
    getSpeed: false,
    onScroll: function() {
      console.log("sss")
    }
});

Hey is it possible to trigger events on data-scroll-section and do animations with js instead of css? Since I want to use gsap for building the animation timeline

• index.vue / nuxtjs

<template>
  <section>
    <div id="js-scroll" :data-scroll-call="sectionAnimIsInView">
      <div data-scroll data-scroll-speed="1" class="box red"></div>
      <div data-scroll data-scroll-speed="2" class="box blue"></div>
    </div>
  </section>
</template>
<script>
// import TimelineMax from 'gsap/TimelineMax';

export default {
  data() {
    return {
      lmS: null
    };
  },
  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector("#js-scroll"),
      smooth: true
    });
    console.log("lmS", this.lmS);
  },
  methods: {
    sectionAnimIsInView(elems) {
      // const tl = new TimelineMax();
      // tl. .... do something
    }
  }
};
</script>

https://codesandbox.io/s/codesandbox-nuxt-7kb0f