locomotive-scroll | 🛤 Detection of elements in viewport & smooth scrolling | Animation library

I have sections across my site which are using ScrollTrigger. Once I implemented Locomotive JS, all of my ScrollTrigger animations stopped working.

I read through the forums and saw that you need to update() ScrollTrigger when Locomotive is scrolling. I implemented this and saw no results.

Then, I resized the window and my ScrollTrigger animations that were in view, they started working.

In short, animations trigger on resize, but not on page load.

I've implemented update() and also tried refresh(), but no luck.

Demo (fiddle showing issue here also):

I'm developing a site using barba.js. In this page, "slider", I have a three.js scene. If I open up the page everything is fine. If I navigate from slider to home and then come back to slider page, I got this error:

Uncaught (in promise) TypeError: _this.settings is not a function

The script that controls the slider page is Sketch.js.

I'm using locomotive-scroll with Next.js and all working fine. But after route to a different page, my scroll won't destroy and 2 scrolls overlap each other.

How to correctly reinit locomotive-scroll in Next.js after route?

My code example:

I want to import a file that imports another file to be able to use it on multiple pages

folder structure

I'm making a website that uses a lot of js and animations and first section is fullscreen three.js scene which is moving with mouse movement. Scene itself is fine but everyting is being rendered all the time even when im not looking at the three.js webgl canvas and it's making performace problems, while other animations are happening lower on the website.

I need to stop rendering scene completely while scene is not in viewport and that will boost pewrformacne drastically.

Here is render function:

I'm using Locomotive Scroll on a website. What i try to achieve is the following : when a section with the id #mysection is in the viewport, i'd like an icon to appear, then disappear when the section is out of the viewport.

I've tried searching in the docs and on the web ways to achieve this, but i can't figure out how to make it work. Right now, i've seen that you can launch events in the docs by using the following :