Search the Community

This is my first time trying scroll trigger in gsap I am trying to understand how locomotive scroll and scroll trigger work together but when the animation is going on I am facing some kind of sticky-ness in the animation I mean the animation is not smooth there some kind of delay in between but I don't know what is the reason for this. I tried to recreate this situation in my code pen which I have linked below. It will be helpful if some one can help me to solve this. thank you

Hello, guys! how's going? i hope you guys just fine ^_^. I wanna ask about scrollTrigger issue, so i have a locomotive scroll and integrated with GSAP ScrollTrigger but why the animation is going to hard animation or looks like "Steps ease" at my yellow div? (the right side of the "About me" text), and if i add "scrub: true" it will be smooth animation, but i won't add some scrub. You can see my demo here https://codepen.io/ramzxd/pen/vYppKBJ thanks for helping! Keep safe

Hello guys, I am trying to create something similar to this website. https://uiwd.co/ I think I'm pretty close to cracking the code but I am stuck on some issues. 1 : I want image grid on left and right. I can't get these images to align on right side. 2 : Locomotive scroll is not working. When I add it, I can't scroll down past 2 images. 3 : Should I use React to make such websites? Because I will have to create this for client sometime in future. 4: How can I improve my current progress? Thank you all in advance for help.

Hello there! facing a strange problem. When scrolling through the site the animation is working bit slowly or creating judders. Sometimes the scroll get slow as well. Please help me on this. One of the code sample : gsap.to('.aboutHero__semiTitle h2 .char', { delay: .8, y: 0, opacity: 1, ease: "easeInOut", stagger: 0.004, duration: .5, lazy: false, scrollTrigger: { trigger: '.aboutHero__semiTitle', scrub: false, start: "top 70%", scroller: ".smooth-scroller", pin: 0, } }) Cant share the codepen as the site is on my staging server right now

Animation not working perfectly. The main goal is to achieve smoothness. But I am not able to getting it. When you scroll down to the page animation feels like laggy or working a bit slowly specially if you scroll faster you will see it stuck into the page sometimes. Please help me on this one. I am really stuck into this from last couple of days.

Hello everyone, I am relatively new to the topic of GSAP but have already grown very fond of it. I have been trying to implement a horizontal pinned scroll with some divs scrolling vertically on top of it and got it to work: https://codepen.io/sonjara/pen/eYeoPdO So far, so good! Sadly, as I tried to add a smooth scroll (I tried locomotive and smooth scrollbar) that didn't work at all: https://codepen.io/sonjara/pen/GROLBOb It seems as if the trigger of my ".pinElem" moves as I am scrolling and my divs are too far down? I have looked at a lot of forum entries, but so far I couldn't find a solution. I would be very happy and grateful if someone could take the time to help me Thank you!

Hello. I'm having trouble getting any GSAP animations to properly show when using Locomotive Scroll. It works properly in Codepen, but in my dev environment, the splittext animations do not fire unless the screen is resized. Any ideas what I'm doing wrong here? I can't seem to replicate in Codepen so I'm not sure how to troubleshoot. Thanks for any help you can send my way!

Hi everyone, I'm new to the community, but been a huge fan of GSAP which i've just started to get into. I'm currently working on a school project, and trying to implement Locomotive scroll with Scrolltrigger. The issue that im facing is when I enable locomotive scroll, everything seems to be working fine, but when i select and go to a specific page from the menu, user gets stuck in that page, I've also realized that gsap animation that is triggered is also acting a bit strange on scroll, and i cant seem to get it working properly. The site functions normal without the locomotive scroll. I've added a rough draft of my project to give some idea of what i'm doing. I'm fairly new to javascript, and i'm not really sure if my implementation is correct, and i would really appreciate if someone could point me into right direction to setup Scrolltrigger and Locomotive scroll to work properly. Thank you & happy tweening ?

Hello, Since last month my website scrolling appears to be lagging on Chrome, desktop version (slow and blurry compared to Firefox) : https://kuroweb.fr/ I use Gsap scroll trigger with locomotive scroll. I guess my code isn't the best optimized but so far it's been working fine : https://kuroweb.fr/wp-content/themes/kuroweb/js/gsap.js Could someone help me understand why? Thanks !

Hallo Greensocks, Happy holidays to you all Is there anyway to achieve the same img parallax effect from locomotive-scroll to scrolltrigger? I honestly don't like scroll jacking with the locomotive-scroll library, it's causing many problems. https://roelle-tolen.netlify.app/ thanks in advance Sam

Hi, I want to snap each section as I scroll. But since I've added locomotive scroll, it no longer works. I've read a bunch of threads and tried to figure it out myself, but I can't find a working solution. I'd appreciate any help! Thank you (again and again)

Dear community, I've implemented smooth and horizontal scrolling with locomotive scroll and I now want to use ScrollTrigger to control animations based on the horizontal scroll progress. Therefore, I've implemented the scrollerProxy function, which only works if I set my page to vertical scrolling via Locomotive Scroll. In general I face two issues: I cannot use ScrollTrigger with horizontal scrolling of Locomotive Scroll I cannot use Locomotive Scroll's data-scroll-sections to split the page (e.g. for better performance). Please find my implementation of scrollProxy: const scrollContainer = document.querySelector('#scrollable'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, smooth: true, direction: 'horizontal', gestureDirection: 'vertical', getSpeed: true, getDirection: true, useKeyboard: true, multiplier: 0.8, firefoxMultiplier: 1.6 }); gsap.registerPlugin(ScrollTrigger); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollContainer.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); Based on this, I tried something like the following: let trigger = gsap.timeline({ scrollTrigger: { trigger: "#section", start: "left right", end: "left center", markers:true } }); trigger.from(".element", { x: "200px" }) The markers do show up, however they are placed for in a way that it looks like scrollTrigger is expecting vertical scrolling. The animation doesn't work at all - nothing happens. Could somebody please help me out? What could I provide you with in order to help me? Thanks, Aleks

Hey legends. Forgive me if this is a Locomotive issue but I've been trying to pull off a horizontal scroll section but have come across an issue on mobile where as soon as it pins to the section, it becomes REALLY jittery and trying to overflow the section. Sometimes it will forget to pin after a second and readjust. I'm sure it's something i've done with my configuration with Scroll trigger & Locomotive but I can't figure it out. If anyone knows how i can improve this or have come across something similar, i'd appreciate any advice ✌️

Hi I'm trying to do horizontal scrolling whilst use locomotive scroll to slow down the scrolling also I notice there is an issue when using a fixed header the logo moves up slightly once they have reached the bottom the scroll. How do you use locomotive with gasp going horizontally every time I think I'm getting close I end up scrolling diagonally down and to the right rather then just scrolling sideways. I have seen a-lot on here going vertically but can't find any horizontal example. I also wanted to slow it down presumably I can with locomotive? Any ideas would be greatly appreciated.

Hi there, I've been trying to implement Locomtoive Scroll with GSAP ScrollTrigger. I've followed these instructions: https://www.snorkl.tv/scrolltrigger-smooth-scroll/ and the documentation on https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() but I get this Uncaught ReferenceError: locoScroll is not defined error is there something I've been seeing over the head? Here's my code: 'use strict'; import LocomotiveScroll from 'locomotive-scroll'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const scroll = new LocomotiveScroll({ el: document.querySelector('.container'), smooth: true, multiplier: 1, }); // 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('.container', { 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: document.querySelector('.container').style.transform ? 'transform' : 'fixed', }); gsap.to('.info-title', { x: 300, duration: 2, scrollTrigger: { trigger: '.info', markers: true, scrub: true, scroller: '.container', }, }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh();

Hey everyone, I'm building this site: https://taylorandmoor.com I'm using locomotive scroll for smooth scrolling and scrolltrigger for various animations. One animation is to show/hide the main navigation header on scroll. As you can see this works on the website in its current state however I'd like to implement it without using locomotive data-scroll-sections. If you look at the codepen you'll see that the animation gets triggered on scroll down but not on way up until it gets back to the top. The code I'm using for this function: function initShowHideHeader() { const header = select('.js-site-header'); const showHeaderAnim = gsap.from(header, { yPercent: -100, paused: true, duration: 0.3 }).progress(1); ScrollTrigger.create({ scroller: scroller, start: 'top top', end: 99999, onUpdate: (self) => { self.direction === -1 ? showHeaderAnim.play() : showHeaderAnim.reverse(); console.log(self.direction); } }); } I'm guessing the onUpdate function is not working properly which is strange because when I console log self.direction -1 is logged on scroll up? If anybody has anhy insight into implementing this sort of this that would be great! Many thanks

Hey everyone, I am trying to recreate this codepen. But I have a horizontal scrolling website. So its kinda tricky... This is what I have so far gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger); const scrollContainer = document.querySelector('.data-scroll-container'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, direction: 'horizontal', smooth: true, /*lerp: 0.1,*/ /*touchMultiplier: 2.54,*/ reloadOnContextChange: true, tablet: { smooth: true, direction: 'horizontal', gestureDirection: 'both', }, smartphone: { smooth: true, direction: 'vertical', } }); window.onresize = function(){ location.reload(); } locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, // 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: scrollContainer.style.transform ? "transform" : "fixed" }); window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetHeight ; let horizontalScrollLength = pinWrapWidth - window.innerHeight; gsap.to(".pin-wrap", { scrollTrigger: { scroller: scrollContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", onEnter:() => { console.log("Enter") }, pin: true, //horizontal: true, // anticipatePin: 1, start: "left center", end: pinWrapWidth }, /*y: -horizontalScrollLength, ease: "none"*/ }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); }); I cant seem to find out why its not working. The structure of my DOM is similiar as in the codepen. Special is that I use Elementor as my base, but it should not have any affect on this. As attribute I do have data-section in each section, as its not working else... Hope someone can help me!!! ❤️ Cheers zoruak

Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy

Hello, I'm new to GSAP but i was able to put some parallax and some pinned section with horizontal scroll working with ScrollTrigger, but now i wanted to add Locomotive Scroll for smooth scroll and other text animations but GSAP doesnt seem to like it. After adding Locomotive scroll and initializing it, all animations done with ScrollTrigger stopped working. Cant figure out the reason why. I saw this in the scrollerProxy info tried to apply it to my case but with no success const locoScroll = new LocomotiveScroll({ el: document.querySelector(".masterpage"), //my main container (data-scroll-container) smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".masterpage", { 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: "transform" }); Anyone could help me? Thank you in advance

Hi, so I've been trying to work on this all day to no avail. So what i'd like to do is simplify this codepen. It's exactly what I need but the reversed scroll overcomplicates it for me. I tried to remove it, and it broke. Thank you for any help you can give me.

Hey, I have a problematic with LocomotiveScroll & GSAP, I would like each section to show on top of each other while scrolling basically like this https://codepen.io/JackiePaper/pen/mdPvGPK?editors=1010 It's working well with the ScrollTrigger.create(xxx) if I remove `data-scroll-section` on each section with LocomotiveScroll (because this one manage the transform of the section). A website have done it pretty well there : https://clar.dev/ I tried to reverse engineer this, but could not find for now how they did this. If you have any idea on this problematic

Hi everyone, I'm having an issue when trying to pin an element using scrolltrigger with locomotive scroll. When I try to pin an element the width of the scroll proxy seems to get changed (or a scrollbar adrea added, I can't figure out which). You can see an example here: https://staging.taylorandmoor.com/our-collections/ I've also attached a screenshot. On all other pages the scroll container (.scroll-container) is 100vw. I can't recreate the issue in my basic codepen either? I've set pinSpacing to false but is there anything else that could be causing this? Many thanks in advance for any help

Hi there, I am trying to implement a draggable horizontal scrolling section with, but the rest of the page should remain vertical scroll. Can't figure out where it goes wrong. The yellow section is supposed to be horizontal with draggable option

Hi guys, I'm trying to implement Locomotive smooth scroll and GSAP library to my website. The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section. I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help! Here is the CSS and Javascript that I use in my project: https://codepen.io/stacies/pen/PopBXrm

Hey, got another little problem. You will find it on the codepen, I want to have a horizontal scrolling section (you will find it in pink in the codepen), but when the scroll is on the pink section, the little red boxes start to translate to fake the horizontal scrolling but the pinned pink section does not stop. If I pin the horizontal scrolling to the pin of the section it does strange thing. Is there a thing to make both works ? So when the scroll is on the pink section, it scroll horizontally and then the pink section will stay there and wait for the user to scroll completely horizontally. Thanks you again GSAP for your help ❤️