Search the Community

I'm pretty sure that happens, because when reloaded, the window/body/documentElement is not at the very top when locomotive-scroll gets initialized. From what I can tell, on its own, locomotive-scroll will always reload at the very top. I have seen some issues over on their Github where people were asking, whether it was possible to use scroll restoration with locomotive, or for the locomotive-team to implement it, but none of those I remember got a postive answer, if any. So my guess is, that it's just a thing, that is neccessary for locomotive-scroll to work the way it does (one reason I never really used it myself). And a way to work around the issue then would be to set your window.history.scrollRestoration to 'manual' and/or ScrollTrigger.clearScrollMemory('manual') Obviously your page will not reload where it was then, but at least it will be working - as I said, I guess it's very likely just a locomoitve-scroll thing. Does any of you get this updated demo to break? ...I couldn't. https://codepen.io/akapowl/pen/vYzVmVQ

Hi, Sorry about the troubles. I ran your codepen example in debug mode and I was able to see that things got really weird when doing a hard refresh on the page. Unfortunately Locomotive is not a GSAP product and we don't have the time resources to support it. On top of that I know very little about it so I couldn't tell you what is creating the issue. I tried updating GSAP, ScrollTrigger and Locomotive to their latest versions. Also added some extra configurations and code and didn't change much. It works most of the times but sometimes it breaks: https://codepen.io/GreenSock/pen/qBMJmaX I even tried in this example created by @akapowl and the issue persists: https://cdpn.io/pen/debug/wvJroYy If you scroll down and then do a refresh or hard refresh everything goes wrong. My main suspect is the locomotive configuration, since the scroll bar also gets out of place and some as this doesn't happen on their main website: https://locomotivemtl.github.io/locomotive-scroll/ You should create an issue on their repo and look on stackoverflow for some answers. GSAP has it's own smooth scroll solution ScrollSmoother that works and integrates ScrollTrigger effortlessly, so I suggest you take a look at it: https://greensock.com/scrollsmoother/ Sorry I can't be of more assistance. Happy Tweening!

Hi, Sorry about the frustration, we all know is hard trying to solve something and not being able to progress on it. Unfortunately locomotive is not a GSAP plugin and we can’t provide a lot of support for it. I’ve never used locomotive so I can’t say what could be the issue you’re having right now. I could be wrong about this, but maybe the problem stems from the way pinning works in ScrollTrigger and the way locomotive works in moving the scroller container. Take a look at this for better understanding: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children On top of that is Saturday night and, while we thrive in giving all our users the best and fastest possible support we do ask for understanding if there is some sort of latency on the weekend. Here is one example of using locomotive with an horizontal section https://codepen.io/kairij/pen/KKoZxVL Also you can find some results looking in google: https://www.google.com/search?q=scrolltrigger+locomotive+horizontal&rlz=1C9BKJA_enCL1045CL1045&oq=scrolltrigger+locomotive+horizontal&aqs=chrome..69i57j69i60j0i546j0i30i546.31131j0j4&hl=en-US&sourceid=chrome-mobile&ie=UTF-8 Hopefully this helps. Happy Tweening!

Hi, i'm trying to create an horizontal scroll on my gallery section. So i followed lot of tutorials, and compared my code to lot of codepen to understand why, my horizontal scroll doesn't works. Sometimes it works, but the section is not pinned, Sometimes the section is pinned but scroll doesn't works. What did i do wrong. Also i'm using tailwindCss. Here is my useLocoScroll Hook: import {gsap} from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import LocomotiveScroll from "locomotive-scroll" import "locomotive-scroll/src/locomotive-scroll.scss" import { useEffect } from "react" gsap.registerPlugin(ScrollTrigger) const useLocoScroll = () => { useEffect(()=>{ const scrollEl = document.querySelector('#page-wrapper'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth:true, multiplier:1, class: 'is-reveal', markers:true }) locoScroll.on('scroll', () => ScrollTrigger.update) ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", lsUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", lsUpdate); locoScroll.destroy(); locoScroll = null; } }; }) } export default useLocoScroll And here my gallery component. import gsap from "gsap"; import { useEffect, useRef } from "react"; const Gallery = ({ data }) => { const ref = useRef(null); const projects = data.projects.data useEffect(() => { // This does not seem to work without a settimeout setTimeout(() => { let sections = gsap.utils.toArray(".gallery-item-wrapper"); const sectionWidth= ref.current.offsetWidth const scrollWidth = sectionWidth - window.innerWidth console.log(sections); console.log(ref.current.offsetWidth - window.innerWidth); gsap.to(sections, { scrollTrigger: { scroller: "#page-wrapper", scrub: true, trigger: ".sectionHorizontalScroll", pin: true, snap: 1 / (sections.length - 1), start: "top top", end: ()=> `+=${sectionWidth}`, markers: {startColor: "green", endColor: "red", fontSize: "12px"} }, x: -100 * (sections.length - 1), ease: "none", }); }); }, []); return( <section id="" className="h-screen w-max py-32 sectionHorizontalScroll" data-scroll-section > <div className="pinSectionHorizontalScroll"> <div className="flex flex-nowrap w-max" ref={ref} > { projects.map((project, index) => { return <GalleryItem mignature={project.attributes.mignature} title={project.attributes.title} key={project.attributes.title + "-" + index} /> }) } </div> </div> </section> ) } const GalleryItem = ({mignature, title}) => { return ( <div className="w-[50vh] gallery-item-wrapper" data-scroll> <h3 className="text-3xl font-bold text-grayPrimary">{title}</h3> </div> ) } export default Gallery At last, i added my locoScroll to my Layout like that: import ImageWebP from '../../components/ImageWebP' import Birds from './Canvas/Birds' import { Outlet } from "react-router-dom"; import Header from './Header'; import { useState } from 'react'; import CursorProvider from './CustomCursor'; import useLocoScroll from '../../services/useLocoScroll'; export default function Layout() { useLocoScroll(); const [isMenuOpen, toggleMenuOpen] = useState(false) return( <> <CursorProvider> <Header toggleMenu={toggleMenuOpen} isMenu={isMenuOpen}/> <section id='page' className={ 'h-full w-full relative transition-all' + (isMenuOpen ? " ml-96" : " ml-0") }> <section className='fixed left-0 top-0 w-screen h-screen -z-10'> <ImageWebP src={window.location.origin + "/assets/imgs/backrounds/background1.webp"} fallback={window.location.origin + "/assets/imgs/backrounds/background1.jpg"} classnames=" h-screen w-screen object-screen block " alt="A photo showing the expiration date on a box of Lucky Charms" className="object-cover h-full w-full" /> </section> <Birds /> <div id='page-wrapper' className=" w-full h-full min-h-screen z-30" data-scroll-container> <Outlet /> </div> </section> </CursorProvider> </> ) } Thank you if you take times to help me. There is the demo here: https://justhugo.fr

when I reach to a section with horizontal scrolling (which uses scrolltrigger and locomotive scroll) and I refresh the page the page breaks down and the section which has scrolltrigger disappears . here is my website http://www.insoostudio.ir and you can produce this problem by refreshing the page on this section . after refreshing the page on this section you will see that this section scrolling fails and all the section below it will be disappear and all and all the page will breaks down. here is my config for scrolltrigger ``` gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".scrollContainer"); pageContainer.setAttribute("data-scroll-container", ""); const scroller = new LocomotiveScroll({ el: pageContainer, inertia: 0.8, multiplier: 0.5, smooth: true, getDirection: true, }); scroller.on("scroll", function (t) { document.documentElement.setAttribute("data-direction", t.direction); }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: pageContainer.style.transform ? "transform" : "fixed", }); let horizontalSection = document.querySelector(".horizontal-scroll"); let pinWrap = horizontalSection.querySelector(".pin-wrap"); gsap.to(pinWrap, { scrollTrigger: { scroller: "[data-scroll-container]", scrub: true, trigger: horizontalSection, pin: true, start: "top top", , end: () => `+=${pinWrap.offsetWidth}`, }, x: () => window.innerWidth - pinWrap.offsetWidth, ease: "none", }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); ``` I will be thankful if you can help me with this problem.

Hi, That's most likely tied to the fact that the mouse move event handler uses clientX and clientY properties which are tied to the viewport and in this case the image's position is altered by Locomotive as you mention. I don't recall any example of a mouse follow effect with GSAP and Locomotive, but I could be wrong. What I would do is compare the coordinates of the image returned by getBoundingClientRect with the ones of the clientX and clientY ones and find a dynamic way to match them. Unfortunately we don't have the time resources to tackle more complex logic issues in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forums. Happy Tweening!

Thanks Cassie! I've changed the version and the code seems to be working fine now. Only thing I didn't account for is that I'm using a smooth scrolling library which screws up the position of the image right now. I've managed to get all my other gsap animations to work using by adding the 'scroller' attribute, how would I approach this with the animation of this topic? For context, I'm using Locomotive scroll (I'd be using ScrollSmoother if it wasn't for the subscription, maybe once I'm more experienced). Do you maybe have an example I can follow for a case like this? Thanks in advance! I really appreciate you time.

Hey there. Just to clear something up, ScrollSmoother does leverage native scroll, it's a hybrid approach, unlike entirely event driven approaches like locomotive. There are pros and cons to ScrollSmoother and Lenis for sure, Lenis is nice as you can use position sticky and cmd+f, that's a big pro! But it doesn't smooth all inputs like ScrollSmoother, it only smooths wheel, if you drag the scrollbar or use the spacebar or tab to navigate it isn't smoothed at all. We're keeping an eye on which features are most important for our users so we appreciate the feedback! In the interim - you can use ScrollTrigger to create parallax or any other animated effects, so if you were to go with Lenis you can roll your own effects. I certainly wouldn't use Lenis and ScrollSmoother, that's just asking for trouble ? https://codepen.io/GreenSock/pen/RwVGNea

How stupid of me ?, after commenting out every code related to Locomotive Scroll the problem got solved. So the problem was because of the Locomotive Scroll afterall nothing to do with gsap, my apologies... Thank you guys for all the help, really appreciate it. Here is the working version of the site (without smooth scrolling of locomotive scroll). https://portfolio-site-4vot-a4u92xrhv-yusufnergiz.vercel.app/

1) Hi, Thank you for the quick responses. So I've tried to call gsap.registerPlugin(ScrollTrigger) in index.js but it did not solve the issue unfortunately. 2) The problem also accurs in production build in my local machine. 3) The scroller: "#main-container" inside the scrollTrigger is for the locomotive scroll, and without it the animations don't even work in developement. 4) I've also tried to deploy the site by removing the Locomotive Scroll, however, nothings changed. The main problem rn is that all the animations tiggered with ScrollTrigger starts playing as soon as the page loads, and I get the below error in the console. -- Invalid property scrollTrigger set to {trigger: div.styles_certContainer__vzU0O, start: 'top top', end: '+=50%', scrub: true, toggleActions: 'play none none reverse'}end: "+=50%"scrub: truestart: "top top"toggleActions: "play none none reverse"trigger: div.styles_certContainer__vzU0O[[Prototype]]: Object Missing plugin? gsap.registerPlugin() -- 5) I've added these cdn links to the very top of my <head> tag in index.html but nothing changed. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> I am pretty new to gsap and web dev in general so the codesand that I've created might be completely useless but here it is. https://codesandbox.io/s/nice-forest-mb8g7e Here is the github link for the whole code if its needed. https://github.com/YusufNergiz/PortfolioSite Thanks in advance.

@Rodrigo @mvaneijgen thanks for your replies. I somehow managed all I wants from gsap there is only one problem. As you can see in codepen example above I have a section that scrolls horizontally when you reach to that section every thing works fine but on resize there would be an unwanted space at the end of last slide. please look at the below image : here is my config and code for gsap : gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".scrollContainer"); pageContainer.setAttribute("data-scroll-container", ""); const scroller = new LocomotiveScroll({ el: pageContainer, inertia: 0.8, multiplier: 0.5, smooth: true, getDirection: true, }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: pageContainer.style.transform ? "transform" : "fixed", }); // Pinning and horizontal scrolling let horizontalSection = document.querySelector(".horizontal-scroll"); let pinWrap = horizontalSection.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; gsap.to(pinWrap, { scrollTrigger: { scroller: "[data-scroll-container]", scrub: true, trigger: horizontalSection, pin: true, start: "top top", end: pinWrapWidth, invalidateOnRefresh: true, }, x: -horizontalScrollLength, ease: "none", }); // new ResizeObserver(() => scroller.update()).observe( // document.querySelector("[data-scroll-container]") // ); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); } and here is my html <div class="scrollContainer"> <section id="services" class="horizontal-scroll"> <div class="pin-wrap" data-scroll data-scroll-direction="horizontal"> <div class="pin-wrap_row pin-wrap_row--1"></div> <div class="pin-wrap_row pin-wrap_row--2"></div> <div class="pin-wrap_row pin-wrap_row--3"></div> </div> </section> </div> I guess this problem can because ``` let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; ``` and when I resize this width didnt get updated. so how can I handle this problem. please notice everythin works fine on codepen somoe how but not working in my real project.

Hi, Your example is not using GSAP Context and you should always use it when working with React. Implementing it is super simple as shown in the article link Jack shared in the previous post). As for implementing Locomotive in React, yeah that can be a little tricky. @akapowl came up with this vanilla example for using Locomotive with horizontal sections: https://codepen.io/akapowl/pen/wvJroYy Also He has a very good example for using Locomotive with React in this thread: Hopefully this helps. Happy Tweening!

Thanks a lot for your reply, help and time, I'm doing a project and my demo is the home page that has few sections, I use locomotive scroll and gsap together and it works fine till I get to services section. here's what I want, I want this section to scroll horizontally and cards to move to left as I scroll down the way, then when it finishes all cards, I go back to vertical scroll. as u can see in my demo I have many cards and in order not to display them all I need to write them all and give each one unique refs. I was trying to display all of them using map() method and give each cards it's info from items.js. if you know better way please give me a hint. thanks again man

Hi @cmp109 and welcome to the GreenSock forums! Thanks for the kind words, we really like when users appreciate working with GreenSock! ? Without a minimal demo is really hard for us to know exactly what could be the issue, on top of that Locomotive is a third party library and we don't have the time resources to give support for it. But fear not because we do have an example for integrating it with ScrollTrigger: https://codepen.io/GreenSock/pen/zYrELYe GreenSock has it's own solution for smooth scrolling called ScrollSmoother: https://greensock.com/scrollsmoother/ https://greensock.com/docs/v3/Plugins/ScrollSmoother Don't feel discourage about it. My advice (and probably everyone's advice who's been around GSAP for a while) stick around here in the forums, bookmark the docs page and the GreenSock codepen profile. Solving real life issues here in the forums is the best way to get traction with GSAP (it worked really well for me over 10 years ago ) and the whole HTML/CSS/JS stack. Before you notice you'll find yourself solving issues for other users and having animation superpowers. Hopefully this helps. If you have more GSAP related questions let us know. Happy Tweening!

Firstly, ❤️ this! Secondly... wish I was better at it I'm using Locomotive scroll and Splitting.js which chunks up my text into spans, ready to animate. Great stuff. Locomotive scroll adds a is-inview class when a div is entering the viewport making it the perfect opportunity to start my GSAP animation so you get a word after a word effect as it enters the viewport. import { gsap } from "gsap"; import { PixiPlugin } from "gsap/PixiPlugin.js"; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); if (document.querySelector("[data-splitting]")){ gsap.from('.is-inview .char', { duration: .5, ease: "power2.out", opacity: 0, y: '50%' , delay: 20, stagger: .005 }) } On page load, Locomotive adds this is-inview class to everything above the fold so the animation above ^ works perfectly, However, GSAP has now run and finished so when I scroll down the page the letters don't animate in one after the other. They are just visible. You can see it's nested above .is-inview .char so whenever .is-inview is applied .char does it's thing - like it does initially on page load. I don't want to repeat (as in once you've scrolled past it, it shouldn't animate out and in again) so the repeat option for GSAP doesn't seem right - do you know how else can I achieve this? I almost need it to keep checking to see if .is-inview is applied and then if it is, run it again to everything that hasn't already run. I just can't get my head around that part ? Boooo! I saw a post on here that mentions scrollTrigger but this blows my CPU when I querySelectorAll(".char"). The page might have a lot of these spans. const sections = document.querySelectorAll(".char"); sections.forEach((section) => { gsap.to(section, { scrollTrigger: { trigger: section, markers: true, start: "top center" }, borderTopLeftRadius: 0, borderTopRightRadius: 0, duration: 1 }); }); A h2 on my site when all the JS has compiled for Locomotive & Splitting for example looks like this -if it's any help <h2 class="c-heading -h2 words chars splitting is-inview" data-splitting="" data-scroll="data-scroll" data-scroll-offset="500" style="--word-total:1; --char-total:9;"> <span class="word" data-word="eCommerce" style="--word-index:0;"> <span class="char" data-char="e" style="--char-index:0;">e</span> <span class="char" data-char="C" style="--char-index:1;">C</span> <span class="char" data-char="o" style="--char-index:2;">o</span> <span class="char" data-char="m" style="--char-index:3;">m</span> <span class="char" data-char="m" style="--char-index:4;">m</span> <span class="char" data-char="e" style="--char-index:5;">e</span> <span class="char" data-char="r" style="--char-index:6;">r</span> <span class="char" data-char="c" style="--char-index:7;">c</span> <span class="char" data-char="e" style="--char-index:8;">e</span> </span> </h2> Appreciate any guidance - Thanks!

If I recall correctly, ScrollTrigger's snapping never worked with locomotive-scroll due to locomotive-scroll's method to 'set' its scroll-position - and that doesn't seem to have changed even with the latest version(s) of locomotive-scroll, although they changed that method a bit. Just another good reason for ScrollSmoother. [It works fine in the preview, since locomotive-scroll reverts back to native browser-scrolling at certain window widths, but once the smooth-scrolling is active (on wider windows), it won't work anymore] https://codepen.io/akapowl/pen/mdjNeqo

Hi there, this looks like an issue between locomotive scroll and GSAP We have our own smooth scroll plugin ScrollSmoother - which we recommend, it avoids compatibility mismatches like this. Your code is working a ok if we remove locomotive. https://codepen.io/GreenSock/pen/ExpqjNj?editors=0010 Maybe you could reach out to the folks that at locomotive for help? https://github.com/locomotivemtl/locomotive-scroll

Hi, It sounds like you must have some layout shifting after you create your ScrollTrigger instances. Maybe you're loading images or using lazy loading for some elements of your page. Maybe wait for the load event and create your Locomotive and ScrollTrigger instances after all the images are loaded, or add fix heights to your images to prevent those layout shifts. Like @mvaneijgen mentions, a minimal demo that is close to your real setup (no need for the entire project) could give us some idea of what the issue might be. Happy Tweening!

thanks for your answer. I removed all related thing to locomotive scroll and I just worked with your package and I still have the problem. my problem is container with class pin-spacer is added to dom with so many delay.

Hi @alisafa welcome to the forum! locomotive-scroll is a third party tool, there are some demo's how there to show you how to set it up, but GSAP has its own smooth scroll library aptly name SmoothScroll, which is build to work with ScrollTrigger, so if you want support on these forums, you're better of using the tools that are provided by Greensock, because we like to keep this forum focused on the GSAP tools. https://codepen.io/GreenSock/pen/ExPdqKy

Hi guys. I am using locomotive scroll and gsap and scrolltiriger in my project. in codepen demo you can see the structure idea that I want to implement in my real project. (a smooth scrolling and a pin section with horizontal scrolling effect) I found out that the desire behavior happens only after an element with class pin-spacer is added to dom. in this demo on code pen after running the project everything work just fine but in my real project(that have this structure but with some photos and iframes and other things) the element with class pin-spacer is added with delay and it causes that the scroll behavior ( section with horizontal scrolling behavior ) not happening after page is loaded and it works after something like 20 seconds. I tried to used gsap and locomotive scroll packaes with npm or cdn or adding <script> directly and none of them solve my problem. could you help me please? how can I make the element pin-spacer added to dom right away? I want horizontal scrolling work when dom is ready

There is a lot of content out there how to setup locomotive scroll with ScrollTrigger, but this is a bit old at the moment, because GSAP has it own smooth scroll aptly named SmoothScroll which perfectly works with ScrollTrigger, so if you don't have a specific need for locomotive scroll I would suggest going with SmoothScroll, will save you a lot of time. https://codepen.io/GreenSock/pen/ExPdqKy

Good afternoon! My scrollTrigger does not see the locomotiveScroll items. I have configured from scrollTrigger.scrollerProxy() documentation to make scrollTrigger and locomotiveScroll compatible. Everything looks fine when scrolling, but the item markers for scrollTrigger scroll along with the site scrolling. Here is my hook, for scrollTrigger and LocomotiveScroll import { useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import LocomotiveScroll from "locomotive-scroll"; gsap.registerPlugin(ScrollTrigger); export function useLocoScroll(start) { useEffect(() => { if (!start) return; const scrollEl = document.querySelector('#main-section'); if (start) { const locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1, lerp: 0.06, class: 'is-reveal', tablet: { smooth: true }, smartphone: { smooth: true, } }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.defaults({ scroller: scrollEl }); ScrollTrigger.refresh(); } }, [start]); } I have noticed one interesting behaviour of the scrollTrigger. When I resize the screen, these markers are positioned where they should be, i.e. under my items. I tried to solve this by removing the start argument from useEffect. This seems to solve my problem with the markers, but then the scroller from locomotiveScroll is replaced by the standard browser scroller. How can this be fixed? Example codesandbox

Created an About component as an example. Added a couple of other components (Section, Content are just 'section and div' tags). Prepared useLayoutEffect for animations. But I see that in the end my animation doesn't work, although the elements are there, I console, but the element doesn't react in any way. What could be the problem? I forgot to mention that I use locomotiveScroll for scrolling. Perhaps that's what's causing the problem. I have changed the codesandbox slightly. codesandbox import React, { useEffect, useLayoutEffect } from "react"; import LocomotiveScroll from "locomotive-scroll"; import "locomotive-scroll/src/locomotive-scroll.scss"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import about from "./about.module.scss"; gsap.registerPlugin(ScrollTrigger); export default function App() { useEffect(() => { const scrollEl = document.querySelector("#main-section"); const locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1, lerp: 0.06, class: "is-reveal", tablet: { smooth: true }, smartphone: { smooth: true } }); }, []); useLayoutEffect(() => { let ctx = gsap.context(() => { let timeline = gsap.timeline({ delay: 0.5 }); timeline .from(`.${about.about}`, { scrollTrigger: { trigger: `.${about.about}`, start: "+100px top", end: "bottom bottom", markers: true, scrub: true } }) .from(`.${about.subtitle}`, { scrollTrigger: { trigger: `.${about.about}`, start: "top top", scrub: true, pin: true }, x: 100, opacity: 0.5, duration: 2, delay: 2 }); }); return () => ctx.revert(); }); return ( <div id="main-section"> <section className={about.about} data-scroll-section> <div className={about.about__content}> <h2 className={about.subtitle}>600ds.</h2> </div> </section> </div> ); }

https://imgur.com/a/0IBWb7T Works just fine for me. Maybe you need to resize your viewing-window and reload, to make sure locomotive-scroll actually uses the transform-smooth-scrolling ? ...because as already mentioned, it will revert back to native browser scrolling when loaded below a certain window width. Which is also why you should not remove this line pinType: document.querySelector(".App").style.transform ? "transform" : "fixed" because that line makes sure that when locomotive-scroll reverts back to native browser scrolling, ST will use position fixed for the pinning. As your scroller is not the body, otherwise it will be using 'transform' by default, which will make your pins appear rather jittery when locomotive-scroll reverts back to native browser scrolling. Edit: My demo actually still does have some issues - with regard to things not working quite right on resize - but for the time being I don't have time to tinker with this some more.