Conflicting with appear.js

[amitsarkerr]

I am using locomotive-scroll js for only scrolling effect. For some sections, I want to use appear.js option. if ($('.bar-line-active').length) { $('.bar-line-active').appear(function () { var el = $(this); var percent = el.data('percent'); $(el).css('width', percent).addClass('counted'); }, { accY: -50 }); }

If I remove Locomotive scroll js, the code is working.

[amitsarkerr]

Still waiting for updates. Please........

[Eldzej]

If I am reading you code correctly, you are using appear.js to trigger something when the section comes into view, yes?

Like a lot of other scroll-based libraries, appear.js is unlikely to work with Locomotive, as Locomotive completely removes all scroll events from firing.

I think you can get around it by using the data-scroll-call attribute, and call your code that way

[amitsarkerr]

Yes, I am using appear.js. How I will use that scroll instead of appear.js? So, when that section will appear on window, the js functions will active?

[Eldzej]

data-scroll-call allows you to trigger functions when the element gets into view

As per the documentation

In HTML

<div class="bar-line-active" data-scroll data-scroll-call="barFn" data-percent="12">Trigger</div>

In JS

function barFn(elm) {
let percent = parseInt(elm.data("percent");
elm.css("width",percent).addClass("counted")
}

scroll.on('call', (functionName, event, element) => {
    $(document).trigger(functionName($(element.el)));
});

Where scroll is you LocomotiveScroll instance

Edit: updated with function mockup

[amitsarkerr]

Thanks for your help. I used your codes, but this does not work. It shows erros in console 'scroll is not a function" -

scroll.on('call', (functionName, event, element) => {
    $(document).trigger(functionName($(element.el)));
});

[Eldzej]

"scroll" in this case is the locomotive instance, The name will depend on how you named it during initialization.

You should have something like this somewhere in your code

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

Call the "scroll.on" using whatever the variable storing Locomotive instance is, and after it is initialized.

[amitsarkerr]

Thanks. Now it says functionName is not a function https://prnt.sc/126a669

[Eldzej]

Apparently, jQuery is a bit asinine about it

This should work

scroll.on('call', (functionName, event, element) => {
    $.fn.[functionName](element.el);
});

$.fn.myFn = function(element) {
  console.log(element);
}

with myFn being called from the element

<div data-scroll data-scroll-call='myFn'>
      When scrolled to, I show up in console
    </div>