Search the Community

I'm trying to implement a GSAP timeline with Locomotive Scroll beta to pin an element while scrolling in a Next.js component. The code works perfectly in a normal HTML and JS environment, but it's not functioning as expected in Next.js. Here is the minimal demo with normal html environment: https://codesandbox.io/p/sandbox/gsap-timeline-forked-3dqjgv?file=%2Fsrc%2Findex.js%3A8%2C18 Here is the Next Js version: https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11 I'm new to GSAP and I'm looking for assistance to fix the issue.

Hi Everyone, Can anyone help me to create sticky section with image, content reveal effect same as this reference website https://pave.ai/ ? It would be also good If any similar code, example available.

Hi, I am using locomotive scroll for the first time. I am facing some issue with moving horizontally when scrolling up or scrolling down. I am trying to have a effect like this website https://polygondesign.com.au/ It scrolls fine when I horizontally scroll on mousepad but not vertically up or down swipe on mac book. Highly appreciate any ideas or suggestions. thanks The attached codepen doesnt have the problem but attached to just give idea on what should be happening when scroll up and down. same behavior doesnt happen on my website. (I wonder if this is anything to do with any css issue) document.addEventListener('DOMContentLoaded', function() { var container = document.querySelector('#page'); // Initialize Locomotive Scroll var lscroll = new LocomotiveScroll({ el: container, smooth: true, // Enable smooth scrolling horizontal: true, // Enable horizontal scrolling multiplier: 2 }); // Add event listener for wheel event - DOESNT HORIZONTALLY MOVE WHEN VERTICALLY SCROLLED container.addEventListener("wheel", (evt) => { evt.preventDefault(); container.scrollLeft += evt.deltaY; }, { passive: false }); });

Hello im trying to achieve this effect with locomotive scroll Graphic hunters and here is the link to my code on GitHub and here it is live. I tried adding this javascript for scroll trigger and I also added the locomotive scroll for some reason it seems locomotive is maybe making it not work. gsap.registerPlugin(ScrollTrigger); // Call this function when the DOM content has loaded document.addEventListener("DOMContentLoaded", function() { // Initialize other functions like initLoaderHome(), initTimeZone() as needed initLoaderHome(); initMagneticButtons(); initTimeZone(); initBasicFunctions(); initScrolltriggerCheckScroll(); initScroll(); initScrolltriggerAnimations(); }); function initScroll() { let scroll = new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: true, lerp: 0.075, }); scroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy("[data-scroll-container]", { 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: document.querySelector("[data-scroll-container]").style.transform ? "transform" : "fixed", }); window.addEventListener('resize', () => { scroll.update(); ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); } /** * Scrolltrigger Animations Desktop + Mobile */ function initScrolltriggerAnimations() { // Disable GSAP on Mobile // Source: https://greensock.com/forums/topic/26325-disabling-scrolltrigger-on-mobile-with-mediamatch/ ScrollTrigger.matchMedia({ // Desktop Only Scrolltrigger "(min-width: 1025px)": function() { if (document.querySelector(".bg-img")) { // Scrolltrigger Animation : Example $(".bg-img").each(function(index) { let triggerElement = $(this); let targetElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "100% 100%", end: "150% 0%", scrub: 0, } }); tl.to(targetElement, { opacity: 0, ease: "Power3.easeOut" }); }); } }, // End Desktop Only Scrolltrigger // Mobile Only Scrolltrigger "(max-width: 1024px)": function() { if (document.querySelector(".example")) { // Scrolltrigger Animation : Example $(".example").each(function(index) { let triggerElement = $(this); let targetElement = $(".example"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "0% 100%", end: "100% 0%", scrub: 0 } }); tl.to(targetElement, { rotate: 90, ease: "none" }); }); } } // End Mobile Only Scrolltrigger }); // End GSAP Matchmedia } but it wont work for some reason, when I apply markers: true it shows fade working but it doesnt work when no markers. I also not my locomotive code is causing that javascript I provide to not work. thats why it wont fade. I have no idea why it would do that.

Hello im trying to get my barba.js to work and animate to different pages. When it goes to the second page it doesnt do anything. None of the buttons work either. Also I tried uploading to codepen but im not sure how to do multiple pages on there. here it is live and and git hub code

https://oceanschool.nfb.ca/

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;

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

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 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

<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

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

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

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 ?

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?

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/

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!

Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support

Hello, I was looking for some info on how to tie some scrolling behavior to scroll speed and I came across this post. In it, @ZachSaucier says The original poster does not reply so there is no additional discussion of this. One of the websites listed is the portfolio site of Abishek Jha who has one of his sites listed on the Github page for Locomotive. But, Wappalyzer says both websites use GSAP. I started to use Locomotive at one point but the features of ScrollSmoother seem to make it unnecessary. Has the addition of ScollSmoother removed the need to pair GSAP & Locomotive? I also found another post from less than a year ago asking about this pairing and @OSUblake didn't tell the poster to just use ScrollSmoother so I'm trying to see what the most recent thinking on this is. I tried to find an answer on my own but I don't know when ScrollSmoother came out! Thanks, Graham

Hy, first sorry for my english I'm french ?. I'm working on a website and I have a problem with an horizontal scroll on the mobile versio. The fact is that we have two horizontal scroll in one page, on the first scroll, everithing is ok, but when we finish to scroll the second one, the first pass over the second. const scroller = document.querySelector('#scroller'); const locoScroll = new LocomotiveScroll({ el: scroller, smooth: true, smartphone: { smooth: true, }, tablet: { smooth: true, } }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(scroller, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: scroller.style.transform ? "transform" : "fixed" }); ScrollTrigger.defaults({ scroller: scroller }) /* Scroll locomotive + horizontal */ const horizontalSections = gsap.utils.toArray('section.horizontal') // const getMaxWidth = () => { // maxWidth = 0; // sections.forEach((section) => { // maxWidth += section.offsetWidth; // }); // console.log(maxWidth); // }; horizontalSections.forEach(function (sec, i) { let horizontal = document.querySelectorAll('.horizontal'); var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); // getMaxWidth(); var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); gsap.fromTo(thisAnimWrap, { x: () => 0 }, { x: () => getToValue(), ease: "none", scrollTrigger: { mobile:{ smooth: true, }, trigger: sec, scroller: scroller, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: true, //markers: true } }); }); Did you have something to help us or not ? Thanks in advance to the team.

Hi, I have come across a bug on mobile where if I scroll once and don't touch the screen again it automatically pulls the entire scroll position back to the top. I am not extremely familiar with GSAP and the horizontal scroll, as I used a common Codepen example to recreate this effect. My website is: shanefry.com Desktop: Have the horizontal scroll section - works as expected Mobile: I hide that section and display a mobile alternative - for some reason it gets pulled to the top (cant navigate the website) I find if I remove the horizontal scroll code, my website works as normal... So I'm assuming something here is causing my locomotive scroll to be reset back to the top? Is there a way to kill this code on mobile and tablet? The video attached shows the behavior I'm talking about. (Keep in mind I scroll once and don't touch the screen again) const pageContainer = document.querySelector('#scroller'); const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, getDirection: true }); gsap.registerPlugin(ScrollTrigger); 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 pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: "+=3000" }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh();

Hello Everyone! sorry for my english. Ok , so im trying to use React-locomotive-scroll together with gsap Scrolltrigger. I set up my scrollerproxy component and inserted it into my app and averything seems fine (console is not showing any errors). But when i use scrolltrigger in to my Home page my animation target doesn t change. But when i resize my screen the animation starts. Did anyone came in to this problem before? I left attached will leave my APP, HOME and SCROLLERPROXY code pics to make it clear. Thanks and i hope someone can help me

Hi all. I've been trying to fix the bug for a couple of days now, searching the web for an answer, but nothing helps. The essence of the problem is as follows - after barba transition scrolltrigger markers does not move with locomotive scroll. I will throw my code below. Thank you in advance for your kind help in solving this bug! I will be grateful to everyone! app.js

I am trying to set up locomotive scroll with ScrollTrigger but it seems that the ScrollTrigger does not work. I would like for the animation to run as scrub, only when scrolling but the tl runs as normal when refreshing the page, ignoring the ScrollTrigger. I am wondering if ScrollTrigger still works with another smooth-scrolling libraries, since gsap now has a SmoothScroll plugin. I made my setup base on a video I found on youtube and I think I set up everything properly. As it seems that a minimal demo is requested often, I have created a sandbox. Thank you!

// or all tools are exported from the "all" file (excluding members-only plugins): import LocomotiveScroll from 'locomotive-scroll' import { gsap, ScrollTrigger, TextPlugin} from "gsap/all"; // don't forget to register plugins gsap.registerPlugin(ScrollTrigger, TextPlugin); // Smooth Scroll Function const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scroll-smooth-loco"), smooth: true, // for tablet smooth tablet: { smooth: true }, }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".scroll-smooth-loco", { 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 }; } // follwoing line is not required to work pinning on touch screen /* pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"*/ }); let tl = gsap.timeline(); // define timeline // Animate graphs function function initGraphSectionAnimate() { tl.from([".graphGrowY"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom +=200", pin: true, scrub: true, // markers: true, }, }); tl.from([".graphGrowFromBottom"], { scaleY: 0, transformOrigin: "top", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }); tl.from([".graphGrowCreditCards1"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }) .from([".graphGrowCreditCards2"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }) .from([".graphGrowCreditCards3"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }) .from([".graphGrowCreditCards4"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }); } // Manipulation of numbers function function initNumberManipulationAnimated(startCountNum, endCountNum, idOfElement) { let startCount = startCountNum, num = {var:startCount}; gsap.timeline({ scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "+=300", scrub: true, } }) .to(num, {var: endCountNum, duration: 5, ease:"none", onUpdate:changeNumber}) .to({}, {duration:2}) function changeNumber() { idOfElement.innerHTML = (num.var).toFixed(); } } // Manipulate All Numbers Function function manipulateAllNums() { initNumberManipulationAnimated(0, 205115, numbers); // For Credit Balance initNumberManipulationAnimated(0, 1540, buildbalancecount); // For Bill & Taxes initNumberManipulationAnimated(0, 4230, energyPower); initNumberManipulationAnimated(0, 3421, bonusNumAnm); initNumberManipulationAnimated(0, 56909, EarningsAm); initNumberManipulationAnimated(0, 6543, SpentThisMonth); initNumberManipulationAnimated(0, 543, clientAmNum); initNumberManipulationAnimated(0, 985, LeadsAmNum); initNumberManipulationAnimated(0, 780, RevenueAmNum); initNumberManipulationAnimated(0, 34, UsersAmNum); } // Big Animate Section UI, Code Speed up Section function bigUiCodeAnimation() { // green light Animate const greenlightAnimate = gsap.timeline({ repeat: -1 }).to(".greenResLight", { opacity: 0, duration: 1.5, ease: "Power4.inOut" }); // main animation const tl = gsap.timeline( { // defining ScrollTrigger scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", start: "top top", end: "bottom +=350", pin: true, scrub: true, // markers: true, } }) tl.fromTo( // Animating Best ui text ".hero-text", { y: "50px", opacity: 0, duration: 10, delay: 2 }, { y: "0px", opacity: 1, stagger: 0.5 }, "+=1" ) .to(".hero-text", { opacity: 0 }, "+=1") // fade out Best ui text .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", { background: 'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)', scale: 3, x: -50, ease: "none", duration: 10, }, "+=1" ) .from([ ".triangleElementUi", ".circleElementUi", ".uiShape1", ".uiShape2" ], { scale: 0, opacity: 0, transform: "rotate(90deg)", duration: 3 } , "+=1" ) .from(".greatManImg1", {scale: 5, opacity: 0, duration: 10}, "+=1") .from(".greatManImg2", {scale: 5, opacity: 0, duration: 10}, "+=1") .from(".greatManImg3", {scale: 5, opacity: 0, duration: 10}, "+=1") .to(".bestUiDesignSec",{opacity: 0, duration: 3}, "+=1") .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", { background: '#ffffff', x: 7, scale: 1, ease: "none", duration: 10, }, "+=1" ) .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {backgroundImage: "url(frontend/media/best-in-class-ui-code/code-editor-bg.svg)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1") .from(".consoleEditorSvg", {scale: 0.5, opacity: 0, duration: 10, delay: 1}, "+=1") .to(".constText", { duration: 2, text: "const", delay: 1 }) .to(".getRespText", { duration: 2, text: "getResponse", delay: 1 }) .to(".getResEqText", { duration: 2, text: "=", delay: 1 }) .to(".getResDataLineText", { duration: 2, text: "axirio", delay: 1 }) .to(".getResDataDotText", { duration: 2, text: ".", delay: 1 }) .to(".getResDataGetText", { duration: 2, text: "GetData", delay: 1 }) .to(".getResDataBreText", { duration: 2, text: "()", delay: 1 }) .to(".getResDataColText", { duration: 2, text: ";", delay: 1 }) .from(".respSvg", { y: -50, scale: 1, opacity: 0, duration: 3, }) .from(".showCodeSlow",{ opacity: 0, duration: 3 }) .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", { backgroundImage: '', duration: 3, }) .to(".consoleEditorSvg", { opacity: 0, duration: 3 }) .to(".respSvg", { opacity: 0, duration: 3 }, "+=1") .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {backgroundImage: "url(frontend/media/best-in-class-ui-code/speed-upBg.png)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1") .from(".speed-upSvg", { opacity: 0, scale: 0, duration: 10 }) .from(".fallingAngle", { opacity: 0, y: -70, duration: 3 }); } // initializer function function init() { initGraphSectionAnimate(); manipulateAllNums(); bigUiCodeAnimation(); } window.addEventListener("load", function () { init(); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.defaults({ scroller: '.scroll-smooth-loco' }); // --- SETUP END --- });