Search the Community

Hi there I'm new in gsap I'm having issues with animating images on scrollTrigger in react js. When I'm scrolling onUpdate function not calling I know i'm doing something wrong in my code but I can't figure out. import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import './App.css'; import Header from './Components/Header'; import Page from './Components/Page'; import Page1 from './Components/Page1'; import Page2 from './Components/Page2'; import Page3 from './Components/Page3'; import Page4 from './Components/Page4'; import Page5 from './Components/Page5'; import Page6 from './Components/Page6'; import Page7 from './Components/Page7'; import Page8 from './Components/Page8'; import Page9 from './Components/Page9'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useGSAP } from '@gsap/react'; gsap.registerPlugin(ScrollTrigger); function App() { const mainRef = useRef<HTMLElement>(null); const page = useRef<HTMLElement>(null); const page1 = useRef<HTMLElement>(null); const page2 = useRef<HTMLElement>(null); const page3 = useRef<HTMLElement>(null); const page4 = useRef<HTMLElement>(null); const page5 = useRef<HTMLElement>(null); const [frameCount, setFrameCount] = useState(467); useLayoutEffect(() => { new LocomotiveScroll({ smooth: true }); }, []); const canvaRef = useRef<HTMLCanvasElement>(null); const [imageSeq, setImageSeq] = useState({ frame: 1 }); const [renderImages, setRenderImages] = useState<Array<HTMLImageElement>>([]); const [loading, setLoading] = useState(true); // useLayoutEffect(() => {}, [canvaRef.current]); function scaleImage(img: HTMLImageElement, ctx: CanvasRenderingContext2D) { console.log(img); const canvas = ctx.canvas; const hRatio = canvas.width / img?.width; const vRatio = canvas.height / img?.height; const ratio = Math.max(hRatio, vRatio); const centerShift_x = (canvas.width - img.width * ratio) / 2; const centerShift_y = (canvas.height - img.height * ratio) / 2; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage( img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width * ratio, img.height * ratio ); } useEffect(() => { const loadImages = async () => { const images = import.meta.glob('./assets/sequence/*'); const imagePromises = Object.values(images).map((resolve) => resolve()); const imageModules = await Promise.all(imagePromises); const imageUrls = imageModules.map((module) => module.default); // setImages(imageUrls); // This will log an array of image URLs return imageUrls; }; loadImages() .then((urls) => { const imgs = urls.map((item) => { const img = new Image(); img.src = item; return img; }); setRenderImages(imgs); }) .then(() => { setLoading(false); }) .catch((err) => console.log(err)); }, []); useGSAP( () => { animation(); }, { dependencies: [renderImages.length], scope: mainRef } ); const animation = async () => { if (!canvaRef.current || !renderImages[0]) return; console.log({ canvaRef }); const canvas = canvaRef.current; const context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; console.log(this.window.innerWidth); render(context as CanvasRenderingContext2D); }); gsap.to(imageSeq, { frame: frameCount, // Decrement the frame in the animation snap: 'frame', ease: 'none', scrollTrigger: { scrub: 0.5, trigger: page.current, start: 'top top', end: '400% top', scroller: mainRef.current, }, onUpdate: () => { // Update the state with the new frame count setFrameCount((prev) => prev - 1); // Set the updated frame value without animating gsap.set(imageSeq, { frame: frameCount }); // Render based on the updated frame render(context as CanvasRenderingContext2D); console.log(imageSeq); }, }); ScrollTrigger.create({ trigger: mainRef.current, pin: true, markers: true, scroller: mainRef.current, // set start end according to preference start: `top top`, end: `400% top`, }); renderImages[1].onload = () => render(context as CanvasRenderingContext2D); // renderImages[1].onload = () => // scaleImage(renderImages[imageSeq.frame], context); }; function render(context: CanvasRenderingContext2D) { console.log(imageSeq?._gsap); scaleImage(renderImages[imageSeq.frame], context); } console.log(imageSeq); if (loading) return <div>Loading</div>; return ( <div ref={mainRef as React.RefObject<HTMLDivElement>} className='relative overflow-hidden bg-[#2C2C2C]' > <Header /> <div className='r relative overflow-hidden min-h-[100vh] min-w-[100vw]'> <Page ref={canvaRef as React.RefObject<HTMLCanvasElement>} /> <canvas id='canvas' style={{ zIndex: '9999' }} className='z-50 max-w-[100vw] max-h-[100vh]' ref={canvaRef as React.RefObject<HTMLCanvasElement>} ></canvas> </div> <Page1 ref={page1 as React.RefObject<HTMLElement>} /> <Page2 ref={page2 as React.RefObject<HTMLElement>} /> <Page3 ref={page3 as React.RefObject<HTMLElement>} /> <Page4 ref={page4 as React.RefObject<HTMLElement>} /> <Page5 ref={page5 as React.RefObject<HTMLElement>} /> <Page6 /> <Page7 /> <Page8 /> </div> ); } export default App; App.tsx

Hi, so thanks for early reply. I forgot to share the link. here is the link: https://stackblitz.com/edit/react-2nh63l?file=src%2FApp.js When I use your template above, it work perfectly, the quotes were pinned as expected. But when I apply with locomotive scroll, it not working :((.

I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs. Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error: https://streamable.com/m0kvca here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link here is my code in app.js file import React, { useEffect, useState, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function App() { const menuRef = useRef(null); const leftRef = useRef(null); useEffect(() => { (async () => { const LocomotiveScroll = (await import("locomotive-scroll")).default; const locomotiveScroll = new LocomotiveScroll(); })(); }, []); useEffect(() => { const menuElement = menuRef.current; const leftElement = leftRef.current; if (menuElement && leftElement) { ScrollTrigger.create({ trigger: menuElement, start: "top top", end: "bottom bottom", pin: leftElement, markers: true, }); ScrollTrigger.refresh(); } }, []); return ( <div> <div style={{ height: "50vh" }}></div> <div> <div ref={menuRef} style={{ display: "flex", border: "2px", borderStyle: "solid", gap: "20px", }} > <div ref={leftRef} style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }} > <div style={{ padding: "20px" }}>1</div> <div style={{ padding: "20px" }}>2</div> <div style={{ padding: "20px" }}>3</div> <div style={{ padding: "20px" }}>4</div> <div style={{ padding: "20px" }}>5</div> </div> <div style={{ width: "70%" }}> <div style={{ height: "50vh", background: "#ddd" }}></div> <div style={{ height: "50vh", background: "#ff0" }}></div> <div style={{ height: "50vh", background: "#0ff" }}></div> <div style={{ height: "50vh", background: "#0f0" }}></div> <div style={{ height: "50vh", background: "#333" }}></div> </div> </div> </div> <div style={{ height: "50vh", background: "#333" }}>1</div> <div style={{ height: "50vh", background: "#555" }}>2</div> <div style={{ height: "50vh", background: "#777" }}>3</div> <div style={{ height: "50vh", background: "#999" }}>4</div> </div> ); } export default App; làm ơn giúp tôi

Hi, On top of needing a minimal demo, check these threads, they have a lot of valuable information and working examples: Finally is worth noticing that Locomotive is not a GSAP Plugin. We try to keep these free forums focused on GSAP related questions. You are welcome to explore our smooth scrolling solution ScrollSmoother: https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Hopefully this helps. Happy Tweening!

I am trying the exact same thing i saw in tutorials but don't now why I am still getting the locoScroll.on isn't a function error here is my code : import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import LocomotiveScroll from "locomotive-scroll"; const scrollLoco = () => { gsap.registerPlugin(ScrollTrigger) const scrollEl = document.querySelector('.main'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1.5, }); 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, }; }, }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener('refresh', lsUpdate); ScrollTrigger.refresh(); } export default scrollLoco

Hi everyone, i hope you can help me with this error. I can't understand why is not working my code.. This is the page: import { motion } from "framer-motion"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import React, { useLayoutEffect, useRef } from "react"; import styled from "styled-components"; import Img1 from "../assets/images/project1.jpg"; import Img2 from "../assets/images/project1.1.jpg"; import Img3 from "../assets/images/project2.jpg"; import Img4 from "../assets/images/project2.1.jpg"; import Img5 from "../assets/images/project3.jpg"; import Img6 from "../assets/images/project3.1.jpg"; import Img7 from "../assets/images/project4.png"; import Img8 from "../assets/images/project4.1.png"; const Section = styled.div` min-height: 100vh; width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; /* background-color: ${(props) => props.theme.text}; */ `; const Title = styled(motion.h1)` font-size: ${(props) => props.theme.fontxxxl}; font-family: "Kaushan Script"; font-weight: 300; color: ${(props) => props.theme.body}; text-shadow: 1px 1px 1px ${(props) => props.theme.text}; position: absolute; top: 5rem; left: 5rem; z-index: 15; @media (max-width: 64em) { font-size: ${(props) => props.theme.fontxxl}; } @media (max-width: 48em) { font-size: ${(props) => props.theme.fontxl}; } `; const Text = styled.div` width: 20%; background-color: #363636; color: #fff; font-size: ${(props) => props.theme.fontlg}; font-weight: 300; position: absolute; padding: 2rem; height: 100vh; top: 0; left: 0; z-index: 11; p { position: relative; font-size: ${(props) => props.theme.fontlg}; font-weight: 300; margin: 0 auto; top: 25%; } @media (max-width: 48em) { display: none; } `; const RightSide = styled.div` position: absolute; padding-left: 30%; background-color: ${(props) => props.theme.grey}; min-height: 100vh; display: flex; justify-content: flex-start; align-items: center; `; const Item = styled(motion.div)` display: inline-block; width: 20rem; margin-right: 6rem; img { width: 100%; height: auto; cursor: pointer; } h1 { font-weight: 500; text-align: center; cursor: pointer; } @media (max-width: 48em) { width: 15rem; } `; const Product = ({ img, title = "" }) => { return ( // x: 100, y: -100 <Item initial={{ filter: "grayscale(100%)" }} whileInView={{ filter: "grayscale(0%)" }} transition={{ duration: 0.5 }} viewport={{ once: false, amount: "all" }}> <img width="400" height="600" src={img} alt={title} /> <h1>{title}</h1> </Item> ); }; const Portfolio = () => { gsap.registerPlugin(ScrollTrigger); const ref = useRef(null); const horRef = useRef(null); useLayoutEffect(() => { try { let element = ref.current; let scrollingElement = horRef.current; let pinWrapWidth = scrollingElement.offsetWidth; let t1 = gsap.timeline(); setTimeout(() => { t1.to(element, { scrollTrigger: { trigger: element, start: "top top", end: `${pinWrapWidth} bottom`, scroller: ".App", //locomotive-scroll scrub: 1, pin: true, }, height: `${scrollingElement.scrollWidth}px`, ease: "none", }); t1.to(scrollingElement, { scrollTrigger: { trigger: scrollingElement, start: "top top", end: `${pinWrapWidth} bottom`, scroller: ".App", //locomotive-scroll scrub: 1, }, x: -pinWrapWidth, ease: "none", }); ScrollTrigger.refresh(); }, 1000); ScrollTrigger.refresh(); return () => { t1.kill(); ScrollTrigger.kill(); }; } catch (error) { console.error("ScrollTrigger Error:", error); } }, []); return ( <Section> <Title data-scroll data-scroll-speed="-2" data-scroll-direction="horizontal"> Portfolio </Title> <Text data-scroll data-scroll-speed="-4"> <p> Welcome to our Portfolio Showcase, where we proudly present a curated selection of our finest web development projects. Each project is a testament to our team's creativity, technical expertise, and unwavering commitment to excellence. <br /> <br /> Explore a diverse range of visually stunning and functionally exceptional websites that we've crafted for clients across various industries. From sleek and modern designs to user-friendly e-commerce platforms, our portfolio embodies the essence of innovation and craftsmanship. <br /> <br /> These projects are not just websites; they are successful digital experiences that have helped our clients thrive online. Discover the possibilities with our web development agency through our showcased masterpieces. </p> </Text> <RightSide ref={horRef}> <Product img={Img1} title="AFA Trasporti" /> <Product img={Img2} title="AFA Trasporti" /> <Product img={Img3} title="Confort Uno Mobili" /> <Product img={Img4} title="Confort Uno Mobili" /> <Product img={Img5} title="Upvision Media 1.0" /> <Product img={Img6} title="Upvision Media 1.0" /> <Product img={Img7} title="Portfolio" /> <Product img={Img8} title="Portfolio" /> </RightSide> </Section> ); }; export default Portfolio; This is ScrollerTriggerProxy: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import { useEffect } from "react"; import { useLocomotiveScroll } from "react-locomotive-scroll"; const ScrollTriggerProxy = () => { const { scroll } = useLocomotiveScroll(); gsap.registerPlugin(ScrollTrigger); useEffect(() => { if (scroll) { const element = scroll?.el; scroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(element, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: element.style.transform ? "transform" : "fixed", }); } return () => { ScrollTrigger.addEventListener("refresh", () => scroll?.update()); ScrollTrigger.refresh(); }; }, [scroll]); return null; }; export default ScrollTriggerProxy; And App.js: import { ThemeProvider } from "styled-components"; import GlobalStyle from "./style/GlobalStyle"; import { dark } from "../src/style/Themes.js"; import { LocomotiveScrollProvider } from "react-locomotive-scroll"; import ScrollTriggerProxy from "./components/ScrollTriggerProxy"; import { useRef } from "react"; import Home from "./sections/Home"; import "locomotive-scroll/dist/locomotive-scroll.css"; import { AnimatePresence } from "framer-motion"; import Services from "./sections/Services"; import Portfolio from "./sections/Portfolio"; function App() { const containerRef = useRef(null); return ( <> <GlobalStyle /> <ThemeProvider theme={dark}> <LocomotiveScrollProvider options={{ smooth: true, // ... all available Locomotive Scroll instance options smartphone: { smooth: true, }, tablet: { smooth: true, }, }} watch={ [ //..all the dependencies you want to watch to update the scroll. // Basicaly, you would want to watch page/location changes // For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters) ] } containerRef={containerRef}> <ScrollTriggerProxy /> <AnimatePresence> <main className="App" data-scroll-container ref={containerRef}> <Home /> <Services /> <Portfolio /> </main> </AnimatePresence> </LocomotiveScrollProvider> </ThemeProvider> </> ); } export default App; Hope you can help me, thanks.

First of all, I'm not familiar with using CodePen and since there are multiple components involved, I hope you understand that I'll be sharing a CodeSandbox link instead. I'm making an simple animation in React project with GSAP and Locomotive. but I'm experiencing a problem where the start and end markers are not fixed and move along with the scroll. I think I've done GSAP and Locomotive settings well. The strange thing is that when I scroll in the regular mode of codesandbox, the marker is fixed and works well. But when I click the 'toggle responsive preview' button in codesandbox and refresh, then try scrolling, the marker doesn't stay fixed and moves with the scroll. And in a real local environment outside of codesandbox, the marker also doesn't stay fixed and exhibits the same behavior, moving with the scroll. May I know what's the problem?? CodeSandBox Link: https://codesandbox.io/s/locomotive-gsap-xsq7lf?file=/src/App.js Locomotive setting Code: useEffect(() => { const locoScroll = new LocomotiveScroll({ el: document.querySelector(".container"), smooth: true }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".container", { 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(".container").style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); }, []); GSAP Code: useEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: oneRef.current, start: "75% center", end: "105% center", scrub: true, markers: true } }); tl.to(twoRef.current, { x: 300, duration: 5 }); }, []);

Hi @DonDraper and welcome to the GreenSock forums! That most likely has to do with the calculations being made for your smooth scroll functionality and the pin space added by GSAP in order to pin the horizontal section. Maybe try using the refresh event handler to update or re-create your smooth scroll: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener() Also maybe take a look at this codepen by @OSUblake https://codepen.io/osublake/pen/QqPqbN Unfortunately we don't have the time resources to provide this type of help, especially since GSAP already has a smooth scrolling plugin, ScrollMoother: https://greensock.com/scrollsmoother/ @akapowl, one of the forums superstars, has created some great examples for integrating ScrollTrigger with other alternatives like Locomotive: https://codepen.io/akapowl/pen/wvJroYy And this using smooth scrollbar: https://codepen.io/akapowl/pen/poeoONq Finally you could check Lenis: https://lenis.studiofreight.com/ Good luck with your project. Happy Tweening!

Hi, I think this is more related to Locomotive than GSAP. Based on a quick check on the Locomotive docs: https://github.com/locomotivemtl/locomotive-scroll#instance-methods This seems to work: document .querySelector(".totop-fixed") .addEventListener("click", function () { scroller.scrollTo("top"); }); Hopefully this helps Happy Tweening!

import React, { useEffect, useLayoutEffect, useRef } from "react"; import Navbar from "../../Components/Navbar"; import HeroSection from "../hero-section"; import SecondSection from "../SecondSection"; import ThirdSection from "../third-section"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import my from "../../assets/videos/my.mp4"; import MyProjects from "../projects-section"; import useLocoScroll from "../../utils/customHooks/useLocoMotive"; import { useState } from "react"; const Main = () => { // refs const ref = useRef(null); const img = useRef(null); // initialalizing custom hook useLocoScroll(); // regiester ScrollTrigger gsap.registerPlugin(ScrollTrigger); useLayoutEffect(() => { let ctx = gsap.context(() => { const elem = ref.current; // for second section text gsap.to( elem.querySelector("#hid"), { transform: "translateX(-100%)", ease: "none", fontWeight: "40", scrollTrigger: { trigger: document.querySelector("#component"), markers: false, start: "start start", // end: "bottom 40%", // end: () => "+=" + document.querySelector("#hid").offsetWidth, end: () => "+=" + document.querySelector("#hid").offsetWidth * 0.1, scrub: 1, pin: true, fastScrollEnd: true, }, }, ref ); }); return () => { ctx.revert(); }; }, []); useLayoutEffect(() => { const ctx = gsap.context(() => { const elem = img.current; console.log(); gsap.fromTo( "#header_img", { scale: 0.3, translateY: "-60%" }, { // y: -10, scale: 1, ease: "none", force3D: true, scrollTrigger: { trigger: elem, pin: true, start: "top 65%", end: "bottom 70%", // pinType: isTouch ? "fixed" : "transform", scrub: 1, markers: true, }, } ); }); return () => { ctx.revert(); }; }, []); return ( <> <div ref={ref} id="scroll_head" data-scroll-container> <Navbar /> <HeroSection /> {/* second section */} <div className="flex justify-start items-center overflow-hidden h-[100vh]" id="component" data-scroll-section > <h1 className="text-[40vw] uppercase main-heading whitespace-nowrap py-10" id="hid" > Where Imagination Meets Code </h1> <p className="text-white text-4xl">njgjhghgt</p> </div> {/* Third section */} <div className="h-[60vh] flex justify-center items-center" ref={img} data-scroll-section> <img src="https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp" alt="" data-speed="0.5" id="header_img" style={{ transformOrigin: "center center", scale: "0.3" }} /> </div> <MyProjects /> </div> </> ); }; export default Main; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/all"; import LocomotiveScroll from "locomotive-scroll"; import { useEffect } from "react"; import { Scroll } from "react-locomotive-scroll"; gsap.registerPlugin(ScrollTrigger); const useLocoScroll = (start, ref) => { useEffect(() => { let locoScroll = new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: true, // multiplier: 1, class: "is-reveal", }); locoScroll.on("scroll", () => { ScrollTrigger.update(); }); ScrollTrigger.scrollerProxy( document.querySelector("[data-scroll-container]"), { scrollTop(val) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(val, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, scrollLeft(val) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(val, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, } ); const isUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", isUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", isUpdate); locoScroll.destroy(); locoScroll = null; } }; }, [start]); }; export default useLocoScroll;

You can directly call scale: 0.3 in your tween instead of transform: `scale(0.3)`, GSAP has made all transform properties directly accessible. I've commented out your locomotive scroll and everything works perfectly. Getting locomotive scroll to work is not really something we can help with, seen that it is a third party library. I can how ever recommend our own smooth scroll library, aptly named ScrollSmoother (https://greensock.com/docs/v3/Plugins/ScrollSmoother), this will work out of the box with GSAP and ScrollTrigge! That said there are a lot of older topics around Locomotive scroll, if you must use that plugin https://greensock.com/search/?q=locomotive scrolltrigger&quick=1&type=forums_topic&nodes=11 Hope it helps and happy tweening! https://codesandbox.io/p/sandbox/beautiful-kepler-vdqcjp?file=/src/components/About.jsx:30,50

Hi, Unfortunately Locomotive is not a GSAP tool and we don't really have the time resources to give support for it. On top of that my knowledge of locomotive is very limited so I don't know exactly how your example is working and how to achieve what you're asking for. Maybe these examples could provide some inspiration: https://codepen.io/raj-shukla/pen/GREjqrp https://codepen.io/akapowl/pen/wvJroYy Hopefully this helps. Happy Tweening!

Hi, @akapowl, one of the superstars here in the forums, created a great example of using Locomotive with ScrollTrigger that combines vertical and horizontal animations: https://codepen.io/akapowl/pen/wvJroYy Hopefully this helps. Happy Tweening!

@mvaneijgen Please I just need a little bit of help I am new to GSAP and locomotive. It is just a small animation you might correct in just some minutes.

Hi @Ram Ji welcome to the forum! Locomotive is a third party library which is not build by GSAP. We like to keep this forum to GSAP related questions. There are lots of previous topics about locomotive scroll and ScrollTrigger on these forums https://greensock.com/search/?q=locomotive&quick=1&type=forums_topic&nodes=11 if you want to do some research yourself But GSAP has its own smooth scroll library aptly named SmoothScroll, which works out of the box with ScrollTrigger, so this will save you a lot of hassle. You are free to use what ever tool you like of course, but personally I can't help you with Locomotive. https://codepen.io/mvaneijgen/pen/xxQBLgq?editors=0010

Hi I'm new in this web development. I'm learning things right now. This codepen is fully working but when i apply locomotive js in this js file it stops me from scrolling i don't even see the scroll bar. I want to achieve this codepen animation which also woks with the locomotive js. Please help me and explain how it works. Thanks One more thing, when i apply the locomotive i change the scroller to ".main" it is still not working

That might just not be possible as mentioned in this thread. Edit: ...which I now saw, you have also already posted in about this. That thread contains an explanation for why it doesn't work and also a suggestion for an alternative way you can try working around the problem caused by locomotive-scroll yourself [see the post linked above]. But since this appears to be a problem caused by how locomotive-scroll works, and this free GSAP support forum can not offer support for any given 3rd party library, it will likely be pretty much up to you, implementing that logic and refining it to get it to work just how you expect it to.

how to use snap with scrolltrigger using with locomotive scroll. i know this is other library

I don't know why this is not working still. Any ideas ? No scroll, but the content is already on the hidden layer (right on the page). import React, {useLayoutEffect} from "react"; import { useEffect } from "react"; import { useRef } from "react"; import { imageData } from "../../../Constants/constants.jsx"; import "../../../../node_modules/locomotive-scroll/src/locomotive-scroll.scss"; import "../../../styles.scss" import {gsap} from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function useArrayRef() { const refs = useRef([]); refs.current = []; return [refs, (ref) => ref && refs.current.push(ref)]; } const Home = () => { const ref = useRef(null); const [sections, setSectionsRef] = useArrayRef(); 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 totalSections = sections.current.length; gsap.to(sections.current, { xPercent: -100 * (totalSections - 1), ease: "none", scrollTrigger: { trigger: ref.current, pin: true, scrub: 1, // snap: 1 / (totalSections - 1), end: () => "+=" + ref.current.offsetWidth } }); } }, []); const images = imageData.map((tupples, index) => tupples.map((url, elementIndex) => ( <GalleryItem src={url} index={elementIndex} columnOffset={index * 7} /> )) ); if (typeof window === "undefined" || !window.document) { return null } return ( <> {/*<div className="top"></div>*/} <div> <div className={"horizontalTest"} ref={ref}> <div className="contentTest"> <div className="galleryTest"> {images} </div> </div> </div> </div> </> ); }; export default Home;

<template> <div class="scroll" data-scroll-container> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim"></div> </div> </div> </div> </div> <div class="section section-lightblue"> <h2>Some section 1</h2> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim1"></div> </div> </div> </div> </div> <div class="section"> <h2>Some section 2</h2> </div> </div> </template> <script setup lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import LocomotiveScroll from 'locomotive-scroll'; gsap.registerPlugin(ScrollTrigger); let locoScroll: any = null; onMounted(() => { locoScroll = new LocomotiveScroll({ el: document.querySelector('.scroll') as HTMLElement, smooth: true, }); pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed" locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy('.scroll', { scrollTop(value) { return arguments.length ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll?.scroll.instance.scroll.y; }, }); const horizontalSections = gsap.utils.toArray('.horizontal-sections'); horizontalSections.forEach((section: any, i) => { const thisPinWrap = section.querySelector('.pin-wrap'); const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); ScrollTrigger.create({ trigger: section, scroller: '.scroll', start: 'top top', end: () => '+=' + thisAnimWrap.scrollWidth, pin: thisPinWrap, scrub: true, }); const fakeHorizontalAnim = gsap.fromTo( thisAnimWrap, { x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()), }, { x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0), ease: 'none', scrollTrigger: { trigger: section, start: 'top top', scroller: '.scroll', end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth), scrub: true, }, } ); const tl = gsap.timeline(); tl.to('.block-anim', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); const tl1 = gsap.timeline(); tl1.to('.block-anim1', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl1, scroller: '.scroll', scrub: true, }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl, scroller: '.scroll', scrub: true, }); }); ScrollTrigger.refresh(); }); onBeforeRouteLeave((to, from, next) => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); locoScroll?.destroy(); next(); }); </script> <style lang="scss" scoped> body { margin: 0; padding: 0; overflow-x: hidden; } h2 { position: relative; z-index: 2; margin: 0; } .section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; flex: 0 0 100vw; background: lightgray; } .section-gray { background: gray; } .section-lightblue { background: lightblue; } .block-anim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: lightgoldenrodyellow; } .horizontal-sections { position: relative; overflow-x: hidden; .pin-wrap, .animation-wrap { display: flex; position: relative; z-index: 1; height: 100vh; } } .spacer { height: 50vh; width: 100vw; } </style> I use Nuxt3 and gsap and Locomotive Scroll. My first animation called tl working correct, but when scroll down and view second animation called tl1 doen't working. How I can fix it ? my webiste: https://skandynawia-przystan.vercel.app/ my github: https://github.com/cyprianwaclaw/Skandynawia-Przystan

Hi @chandrashekhar welcome to the forum Please start your own topic with a minimal demo demonstrating the issue. Keep in mind that we want to scope this forum to GSAP related questions and seen that locomotive scroll isn't a GSAP product, you're better of asking support from them. Or alternatively you could use the SmoothScroll plugin which is a GSAP product and will work with ScrollTrigger out of the box!

I also find out this problem. I want to use scrollTrigger snap with locomotive scroll but it's not working.. plz, help me to solve this issue..

Unfortunately none of the solutions helped me (I fixed the Locomotive Scroll implementation with Scroll Trigger) but I've found one. When setting up the mobile and tablet scroll for Locomotive Scroll, I deactivated the smooth in order to maintain the vanilla scroll of the browser as Locomotive Scroll gives a really slow scroll on mobile. This is what caused the problem. However, if you put a touchMultiplier instance to Locomotive Scroll you can actually replicate the vanilla scrolling speed. My set up looks like this now: const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scroll-smooth"), smooth: true, multiplier: 0.25, lerp: 0.035, touchMultiplier: 9, tablet: { smooth: true, breakpoint: 0, lerp: 0, }, mobile: { smooth: true, breakpoint: 0, lerp: 0, }, }); It's not the optimal solution if you want to quit smooth scrolling for mobile...but for me it works.

Hi, Your codepen example is far from being minimal (more than a hundred lines of HTML and hundreds of lines of CSS and JS). On top of that you are using Locomotive, which is not a GSAP product. Unfortunately we don't have the time resources to go through complex codebases (that's why we ask for a minimal demo) trying to find issues for our users. The only advice I can give you is to try ScrollTrigger normalize scroll method: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Another option is try the ignoreMobileResize config on the ScrollTrigger defaults as well: ScrollTrigger.defaults({ ignoreMobileResize: true }); Finally it seems that you're not setting up ScrollTrigger to work with Locomotive correctly. Take a look at this example in order to check the best possible way: https://codepen.io/GreenSock/pen/bGQaqzw Hopefully this helps. Happy Tweening!

'use client' import styles from './Projects.module.scss' import Head from 'next/head' import gsap from 'gsap'; import React, { useLayoutEffect, useRef } from 'react'; import Image from 'next/image'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const Project = () => { const ref = useRef(null); const ScrollingRef = useRef(null); useLayoutEffect(() => { const element = ref.current; const scrollingElement = ScrollingRef.current; const timeline = gsap.timeline(); setTimeout(() => { timeline.to(element, { scrollTrigger: { trigger: element, start: 'top top', end: 'bottom+=100% top-=100%', scroller: '.RootLayout', //locomotive-scroll scrub: 1, pin: true, markers: true, }, ease: 'none', }) timeline.fromTo( scrollingElement, { y: '0', }, { y: '-100%', scrollTrigger: { trigger: scrollingElement, start: 'top top', end: 'bottom top', scroller: '.App', scrub: 1, markers: true, }, }, ); ScrollTrigger.refresh(); }, 1000); return () => { }; }, []); return ( <> <Head> <title>Skills</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Changa:wght@400;500;600;700&display=swap" rel="stylesheet" /> </Head> <div id='projects' className='h-screen ml-24'> <div ref={ref} className={styles["section"]}> <div className={styles["box"]} /> <div data-scroll data-scroll-speed="-2" data-scroll-direction="horizontal" className={styles["works"]} >WORKS</div> <div ref={ScrollingRef} className={styles["container"]}> <Image className={styles["items"]} alt='' width={400} height={600} src={"/projects/img1.jpg"} /> <Image className={styles["items"]} alt='' width={400} height={600} src={"/projects/img2.jpg"} /> <Image className={styles["items"]} alt='' width={400} height={600} src={"/projects/img3.jpg"} /> <Image className={styles["items"]} alt='' width={400} height={600} src={"/projects/img4.jpg"} /> </div> <div className={styles["text"]}> <p> Designs are the way to express ones idea into reality. Designs are the way to express ones idea into reality. Designs are the way to express ones idea into reality. </p> </div> </div> </div> </> ) } export default Project