Search the Community

Hi, What exactly is wrong with your latest example? Looks just like the one @mvaneijgen provided yesterday and that was marked as the solution of the thread. Finally your latest example is not using Locomotive Scroll as you mentioned in your previous post ?‍♂️ Happy Tweening!

Hi, There might be something else in your setup causing this since there are examples that combine ScrollTrigger pinning with Locomotive, like this by @akapowl: https://codepen.io/akapowl/pen/NWBOKYB Without a minimal demo there is not a lot that we can do to help. Hopefully Paul's example helps you getting started. Happy Tweening!

I'm so sorry. I can't realise smooth switching of slides. I've already tried different variants of "ease" and timeScale properties, but I can't get to the truth, or I'm wrong and slowing down the switching of slides should be done through scroll, in my case Locomotive Scroll is connected, but when trying to configure it, all animations are broken

Hello Devs, I have been learning GSAP lately with the official docs and some examples on codepen. The recent codepen example i was learning from make use of GSAP scroll Trigger and locomotive scroll. On mobile view on local development, scrollTrigger has this weird behavior of adding extra blank spaces before it unpins a pinned element....i reproduce the same project on codepen and it was quite okay... Now, i am questioning which this is only happening on local devs. For clarity purpose, i added an image of the behavior. I will greatly appreciate y'all feedback, thanks.

Hi, I fiddled a bit around but I can't find a simple way to achieve what you seem to be trying to do, since there are over 250 lines of HTML and more than 300 lines of CSS, so it was kind of hard to find exactly what are you trying to pin. If you on't reduce your demo to just a few divs there is not much we can do, unfortunately we don't have the time resources to comb through complex codebases. On top of that the smooth scroll function you're using there must be a bit old. GSAP has it's own smooth scrolling solution called ScrollSmoother: https://greensock.com/scrollsmoother/ ScrollSmoother is a benefit of Club GreenSock members. Is worth noticing that being a Shockingly Green Club member gives you access to all the bonus plugins and their updates for a year, which will let you do all sort of crazy things in all your projects, which normally pays itself with one project or two, then is all benefits. There are other options for smooth scrolling out there such as Locomotive and Lenis but we can't fully support them because we have to use our limited time resources on GSAP related issues. One of our superstars @akapowl has created a few examples using Locomotive and other libraries: https://codepen.io/akapowl/pen/wvJroYy https://codepen.io/akapowl/pen/poeoONq This is the same example using ScrollSmoother: https://codepen.io/akapowl/pen/OJZgvwp Hopefully this helps. Happy Tweening!

Hi @toundai and welcome to the GreenSock forums! Locomotive is not a GSAP product so we can't really offer support for it since GSAP has it's own smooth scrolling solution called ScrollSmoother: https://greensock.com/scrollsmoother/ But still @akapowl, one of the forums superstars, created this demo for combined scrolling with locomotive: https://codepen.io/akapowl/pen/wvJroYy Also you might want to have a look at this threads as well: Hopefully this helps. Happy Tweening!

I want to convert a locomotive scroll into a gsap module on react. import React, {useLayoutEffect} from "react"; import { useEffect } from "react"; import { useRef } from "react"; import { imageData } from "../../../Constants/constants.jsx"; import LocomotiveScroll from "locomotive-scroll"; import "../../../../node_modules/locomotive-scroll/src/locomotive-scroll.scss"; import "../../../styles.scss" import GalleryItem from "./GalleryItem.jsx"; const Home = () => { const ref = useRef(null); useEffect(() => { if (ref) { if (typeof window === "undefined" || !window.document) { return } const scroll = new LocomotiveScroll({ el: ref.current, smooth: true, direction: "horizontal", multiplier: 0.5, }); } }, []); const images = imageData.map((tupples, index) => tupples.map((url, elementIndex) => ( <GalleryItem key={url} src={url} index={elementIndex} columnOffset={index * 7} /> )) ); if (typeof window === "undefined" || !window.document) { return null } return ( <> {/*<div className="top"></div>*/} <div className="main-container"> <div className="scroll-container" data-scroll-container ref={ref}> <div className="content"> <div className="gallery"> {images} </div> </div> </div> </div> </> ); }; export default Home; I can't use locomotive scroll with both vertical and horizontal scroll. This component display multiple images placed on different position.

Hi, For setting up ScrollTrigger + Locomotive in React you might want to check these threads: Hopefully this helps. Happy Tweening!

Using React + Three JS + GSAP + Locomotive Scroll. When I enable loco scroll, this happens: The whole page is lifted downwards. Please help me.

EDIT : the code sandbox now shows a version without locomotive scroll, the problem I'm now facing is extreme lag that I don't understand, and setting will-change properties breaks both scrub and pin on my elements

Hi if you are using a NextJS @adelcourte you can't call / import the ScrollTrigger outside of the component because nextjs is static, so what you would want to do is something like this which is improvised of your code. import('locomotive-scroll').then((locomotiveModule) => { import("ScrollTrigger/all").then(({ScrollTrigger}) => { gsap.registerPlugin(ScrollTrigger) }) }) It is also applied in other gsap plugin so becareful when you using static html.

Hi, There is not a lot we can do without a minimal demo. We do have this collection of examples that use GSAP in Next apps: https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters On top of that Locomotive is not a GSAP product so we can't really give any support for it. @akapowl, one of the superstars in these forums, came up with a solid resource for using Locomotive with React, it might be worth exploring that: Hopefully this helps. Happy Tweening!

I'm trying to create a simple effect in Nextjs 13 but can't find a way to make nextjs, locoscroll and gsap work together. Here's the wrapper in which all of my pages will be rendered : 'use client' import { useEffect } from 'react' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' export default function LocomotiveScrollProvider({ children }) { useEffect(() => { let locoScroll import('locomotive-scroll').then((locomotiveModule) => { gsap.registerPlugin(ScrollTrigger) locoScroll = new locomotiveModule.default({ el: document.querySelector('[data-scroll-container]'), smooth: true, smoothMobile: false, resetNativeScroll: true, getDirection: true, }) locoScroll.on('scroll', () => { ScrollTrigger.update() }) ScrollTrigger.scrollerProxy('.smooth-scroll-gsap', { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, pinType: document.querySelector('.smooth-scroll-gsap').style .transform ? 'transform' : 'fixed', }) ScrollTrigger.addEventListener('refresh', () => locoScroll.update()) ScrollTrigger.refresh() }) window.addEventListener('DOMContentLoaded', () => { locoScroll.update() }) window.addEventListener('resize', () => { locoScroll.update() }) }, []) return ( <div data-scroll-container> <div className="smooth-scroll-gsap">{children}</div> </div> ) } And here's my component code : 'use client' import { useEffect, useRef } from 'react' import { gsap } from 'gsap' export default function Remember() { const containerRef = useRef(null) const cardRef = useRef(null) useEffect(() => { let ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: containerRef.current, start: 'center center', end: '+=100%', scrub: true, pin: true, markers: true, scroller: '.smooth-scroll-gsap', }, }) tl.from(cardRef.current, { yPercent: 100, top: '100%', }).to(cardRef.current, { yPercent: -50, top: '50%', }) }, containerRef.current) return () => ctx.revert() }, []) return ( <section data-scroll-section ref={containerRef} className="relative min-h-screen flex items-center justify-center" > <div className="row flex justify-center"> <h2 className="text-[10vw] text-center w-2/3 leading-[0.8] font-bit"> REMEMBER YOUR WILDEST MEMORIES </h2> </div> <div ref={cardRef} className="w-[300px] h-[600px] bg-red-500 absolute left-1/2 -translate-x-1/2" ></div> </section> ) } Basically I would like to have an effect like this : There's a div with a text in the middle and a hidden card in absolute position When the div reaches the middle of the viewport, scrolling stops and the card starts changing its top % value to overlay the text in the middle Once done, the scroll starts again But I can't find a way to make it work. Would anyone know about this type of effects ?

Hi @Mustafa Ashraf and welcome to the GreenSock forums! Locomotive is not a GSAP Product so we can't really support it in these forums, we need to keep things GSAP focused here. Maybe these threads can help you: Hopefully this helps. Happy Tweening!

GSAP has a bigger learning curve than locomotive. Locomotive provides a few out-of-the-box effects, whereas GSAP is a whole animation system that allows you to do anything you can think of. You'll need to dig into tweens, timelines and the position parameter to start. Here's an idea of how you can acheive a text effect like locomotive https://codepen.io/GreenSock/pen/BaGBdQb But if I were you I'd start here Good luck!

Hi, Unfortunately I have no experience with Locomotive, but as far as I can tell you should be able to set the scroll position of the DOM node used as proxy in the ScrollTrigger configuration. That should be something the people of Locomotive should be able to answer IMHO. Another option could be to use the Scroll Restoration component React Router has: https://reactrouter.com/en/main/components/scroll-restoration Sorry I can't be of more assistance. Hopefully this helps. Happy Tweening!

Hello, I need some help from someone that knows and understand more about gsap scrollperProxy than I do because I am stuck with a problem that I can't seem to get around it. And honestly, I don't know if this is a gsap related question, and if it isn't I apologize in advance. In project I am using React Router and React Router keeps the same offsetHeight position when changing routes and I would like when the route has changed to have a scroll that scrolls to the Top. The issue is that I am using locomotive-scroll in combination with gsap's scrollTrigger. In order for the scrollTrigger to work with locomotive-scroll I have created a custom hook (which I will leave the code at the end because it's quite long), where I essentially tell scrollTrigger what the current locomotive-scroll, scroll position is using scrollerProxy. Unfortunately, if I try to scroll to the top of the page, for example, I can't. And the console doesn't even throw an error. I tried both using gsap scrollToPlugin and locomotive-scroll's scrollTo function but they only work If I don't use the hook that I've created. using gsap: useLocoScroll(true); const { pathname } = useLocation(); useEffect(() => { gsap.registerPlugin(ScrollToPlugin); gsap.to('.App', { duration: 0, scrollTo: 0, delay: 0, ease: 'none' }); }, [pathname]); using loco scroll: useLocoScroll(true); const { pathname } = useLocation(); const scrollRef = useRef(null); useEffect(() => { const scroll = new LocomotiveScroll(); scrollRef.current = scroll; if (scrollRef.current) { scrollRef.current.scrollTo('top', { offset: 0, duration: 600, easing: [0.25, 0.0, 0.35, 1.0], disableLerp: true, callback: () => { scrollRef.current.on('scroll', ScrollTrigger.update); }, }); } }, [pathname]); (Both of the options above work if useLocoScroll is set to false / `useLocoScroll(false)`) Locomotive-scroll scrollTo function also takes in an object with a callback where I tried to update the ScrollTrigger in various ways but nothing worked. So I was wondering if there is a way I could update the locomotive-scroll base on where the ScrollToPlugin is. Basically, doing the reverse of what I did in the custom hook? Here is the code for the custom hook: import { useLayoutEffect } from 'react'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; const useLocoScroll = (start) => { gsap.registerPlugin(ScrollTrigger); useLayoutEffect(() => { if (!start) return; const scrollEl = document.querySelector('.App'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smoothMobile: false, smooth: true, multiplier: 1, }); 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; }, scrollLeft(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: document.querySelector('.App').style.transform ? 'transform' : 'fixed', }); const locoScrollUpdate = () => { if (locoScroll) { locoScroll.update(); } }; new ResizeObserver(() => { if (locoScroll) { locoScroll.update(); } }).observe(document.querySelector('[data-scroll-container]')); ScrollTrigger.addEventListener('refresh', locoScrollUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener('refresh', locoScrollUpdate); locoScroll.destroy(); locoScroll = null; } }; }, [start]); }; export default useLocoScroll;

@GreenSock Nothing works, I still have the same error. I don't understand why it's so complex. I'm going to try with Locomotive Scroll or Framer Motion, I don't have time to dwell on this problem, I have to deploy this site quickly. Thank you anyway

Good morning, I am having some problems with locomotive scroll and scrolltrigger. I add the locomotive library, I put the scrollerProxy as I saw in some tutorials, but when I scroll on my website the top menu stops working correctly. If I don't scroll I can use the anchored elements in my top menu, but as soon as I scroll they start to fail. It also happens that the scroll does not reach the bottom of my web. Has anyone had similar problems? https://giver-landing.vercel.app/

Hi there Alex! So containerAnimation's calculations are based on the horizontal scroll tween being set up like this let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", duration: 6, scrollTrigger: { trigger: ".scroll", pin: true, scrub: true, markers: true, end: `+=${container.offsetWidth}` } }); Note that the tween only controls the horizontal scroll and the ease is linear. The way yours is set up won't allow for correct calculations. So if I were you I would just add all the animations to a timeline, much in the same way you've done with the masks, move the mask, then move the container, then animate the images in carousel container. Looks like you're using locomotive, here's some info on that! - https://github.com/locomotivemtl/locomotive-scroll/issues/193 I can't see this - can you provide more info about browser/OS/how to reproduce? Chat soon!

Hi @Giovanny7 and welcome to the GreenSock forums! Unfortunately I have literally no experience with Locomotive and Barba so I can't really help you with this. Also both are not GSAP products/plugins so we don't have the bandwidth to give proper support for these tools. The one thing I see is that your codepen example is throwing this error when I try to scroll with the mouse wheel: Uncaught TypeError: Cannot read properties of undefined (reading 'length') Maybe create all your GSAP instances in the Barba callback as well, I mean wait for everything barba related to be completed to then create your GSAP and Locomotive code. There are more than a few examples of using ScrollTrigger with Locomotive so my main suspect is Barba and when exactly your code is running. Sorry I can't be of more assistance. Happy Tweening!

For some reason when I put locomotive scrolling in a function and call it on the once() function inside the barbaJS init everything seems to stop working? Purpose: As soon as the page loads I want locomotive to start and all the animations should start working as well. What I did: I put the locomotive scroll functionality outside a function without it being called and everything works, but I'd like to do it within the barbajS once() function. Anyone has an idea of what is causing this error?

I installed gsap with npm. import gsap from 'gsap'; import { SplitText } from 'gsap/SplitText.js'; gsap.registerPlugin(SplitText); And, I entered this code in my .js files.Import gsap from 'gsap'; seems to work well. ERROR in ./assets/scripts/modules/FancyTexts.js 3:0-46 Module not found: Error: Can't resolve 'gsap/SplitText.js' in 'C:\Users\goodc\workspace\locomotive\assets\scripts\modules' @ ./assets/scripts/modules.js 3:0-61 3:0-61 @ ./assets/scripts/app.js 2:0-37 7:11-18 However, SplitText displays the error 'Module not found: Error: Can't reserve 'gsap/SplitText.js' when building a webpack.Should I download the ClubGreenSock file and put it in the gsap folder?I want you to tell me how to solve the error.And additionally, I'm curious that you can install gsap for free on npm, isn't it a paid library?Does GSAP installed in npm have any functional limitations? Or if I install GSAP on npm, can I use all the features for free?

@Rodrigo Thanks for you answer .I think the one reason for layout breaks in my project after hard reload is when I hard reload there is a short moment that locomotive scroll is not get the control of scroll bar yet , In this short moment I started scrolling so after locomotive take the control and changes the scroll bar I think the position of scroll is somehow is not right anymore and my layout breaks. I added a timer to my Js file and added a loader and make the display of main body to none so at for example 5s of beginning of page's loading , you can not scroll and after 5s loader gone and locomotive takes the control of scroll bar so everything looks fine. but I think if someone's network is not so fast this 5s may not solve the problem. although I insert the locomotive and gsap cdns at the end of body or I insert them in head and used defer to execute them in a order but it didn't help. so the only thing that I could handle was to set a 5s loader as I told you.

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