Search the Community

Hello, I am having an issue with using ScrollTrigger along with Locomotive Scroll. Essentially I am pinning a section and having it reveal an image as you scroll via a div overtop. This all works great when locomotive scroll is disabled. However as soon as it is enabled again the pinSpacing applies the padding below the section instead of overtop for the pinned scroll. Causing the pin to not happen and all the extra padding to be scrollable through below the section. Would love some insight into this from anyone who has worked with these both before. Thanks for your time! gsap.registerPlugin(ScrollTrigger) const FeaturedPost = () => { let tl = gsap.timeline() let featuredPostSection = useRef(null) let image = useRef(null) useEffect(() => { tl.to(image, { scrollTrigger: { trigger: featuredPostSection, pin: true, scrub: true, start: "center center", end: "bottom top", scroller: "#___gatsby", }, scaleY: 0, }) ScrollTrigger.addEventListener("refresh", () => window.scroll.update()) ScrollTrigger.refresh() }, [tl, featuredPostSection, image]) import { useEffect } from "react" import LocomotiveScroll from "locomotive-scroll" import ScrollTrigger from "gsap/ScrollTrigger" import { gsap } from "gsap" gsap.registerPlugin(ScrollTrigger) const scroll = { container: "#___gatsby", options: { smooth: true, smoothMobile: false, getDirection: true, touchMultiplier: 2.5, lerp: 0.08, class: "is-reveal", }, } const Scroll = callbacks => { useEffect(() => { let locomotiveScroll locomotiveScroll = new LocomotiveScroll({ el: document.querySelector(scroll.container), ...scroll.options, }) // Exposing to the global scope for ease of use. locomotiveScroll.update() window.scroll = locomotiveScroll locomotiveScroll.on("scroll", ScrollTrigger.update) locomotiveScroll.on("scroll", func => { // Update `data-direction` with scroll direction. document.documentElement.setAttribute("data-direction", func.direction) }) ScrollTrigger.scrollerProxy("#___gatsby", { scrollTop(value) { return arguments.length ? locomotiveScroll.scrollTo(value, 0, 0) : locomotiveScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, pinType: document.querySelector("#___gatsby").style.transform ? "transform" : "fixed", }) return () => { if (locomotiveScroll) locomotiveScroll.destroy() } }, [callbacks]) return null } export default Scroll

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!

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

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)

Am using Angular and trying to do an animation on ScrollTrigger and using locomotive scroll for scrolling and cant get the scroll animation to work animation (works when I remove locomotive scroll) and my code is as follows import { Component, ElementRef, Inject, OnInit, ViewChild, } from '@angular/core'; import LocomotiveScroll from 'locomotive-scroll'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { locoScroll!: LocomotiveScroll; @ViewChild('home', { static: true }) home: ElementRef<HTMLDivElement>; constructor(@Inject(DOCUMENT) private document: Document) { gsap.registerPlugin(ScrollTrigger); } ngOnInit(): void { this.locoScroll = new LocomotiveScroll({ el: document.querySelector('#body'), smooth: true, }); this.locoScroll.on('scroll', ScrollTrigger.update); this.setup(); this.initialAnimation(); this.initScrollAnimation(); ScrollTrigger.addEventListener('refresh', () => this.locoScroll.update()); ScrollTrigger.refresh(); } setup(): void { ScrollTrigger.scrollerProxy('#body', { scrollTop(value) { return arguments.length ? this.locoScroll.scrollTo(value, 0, 0) : this.locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: (<HTMLElement>document.querySelector('#body')).style.transform ? 'transform' : 'fixed', }); } initScrollAnimation() { gsap.from('.about', { scrollTrigger: { trigger: '.about', scroller: '#body', start: 'bottom bottom', scrub: true, }, ease: 'power4.out', duration: 2, opacity: 0, y: +50, }); } initialAnimation(): void { gsap.from(this.home.nativeElement.childNodes, { duration: 2.5, opacity: 0, scale: 0, ease: 'power4.out', stagger: 0.5, delay: 0.5, }); } } can someone please point out what am missing or doing wrong, thank you

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.

I have sections across my site which are using ScrollTrigger. Once I implemented Locomotive JS, all of my ScrollTrigger animations stopped working. I've read through the forums and saw that you need to update() ScrollTrigger when Locomotive is scrolling. I implemented this and saw no results. Then, I resized the window and my ScrollTrigger animations that were in view, they started working. In short, animations trigger on resize, but not on page load. I've implemented update() and also tried refresh(), but no luck. Below is a demo of the issue. Further down, I've added in steps to recreate and also a visual. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <div data-scroll-container> <div data-scroll-section> <section class="hero"> <div class="container"> <div class="row justify-content-center justify-content-xl-between"> <div class="col-12 col-md-10 col-lg-9 col-xl-5"> <div class="hero__text text-center text-xl-start"> <h1 class="hero__title" data-scroll data-scroll-speed="2">Title</h1> </div> </div> </div> </div> </section> <section class="textImageRepeater"> <div class="container"> <div class="row"> <div class="col-12"> <div class="textImageRepeater__item textImageRepeater__layout--row"> <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight"> <div class="textImageRepeater__copy"> <h2>Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft"> <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy"> </div> </div> <div class="textImageRepeater__item textImageRepeater__layout--rowReverse"> <div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight"> <div class="textImageRepeater__copy"> <h2>Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft"> <img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy"> </div> </div> </div> </div> </div> </section> </div> </div> $(function() { gsap.registerPlugin(ScrollTrigger); function animateFrom(elem, direction) { direction = direction || 1; var x = 0, y = direction * 100; if(elem.classList.contains("gsap_reveal--fromLeft")) { x = -100; y = 0; } else if (elem.classList.contains("gsap_reveal--fromRight")) { x = 100; y = 0; } elem.style.transform = "translate(" + x + "px, " + y + "px)"; elem.style.opacity = "0"; gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, { duration: 2, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto" }); } function hide(elem) { gsap.set(elem, { autoAlpha: 0 }); } gsap.utils.toArray(".gsap_reveal").forEach(function(elem) { hide(elem); // assure that the element is hidden when scrolled into view ScrollTrigger.create({ trigger: elem, onEnter: function() { animateFrom(elem) }, onEnterBack: function() { animateFrom(elem, -1) }, onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view }); }); /*******************************************************************/ /* Locomotive /*******************************************************************/ const pageContainer = document.querySelector("[data-scroll-container]"); const scroll = new LocomotiveScroll({ el: pageContainer, smooth: true }); // each time locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) scroll.on(pageContainer, ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.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}; } }); window.addEventListener("load", function (event) { ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); }); .hero { min-height: 1000px; background: lightblue; display: flex; align-items: center; } .textImageRepeater { overflow: hidden; padding: 120px 0 160px 0; } .textImageRepeater__intro { margin-bottom: 66px; } .textImageRepeater__layout--row { flex-direction: row !important; } .textImageRepeater__layout--rowReverse { flex-direction: row-reverse !important; } .textImageRepeater__item { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 70px; justify-content: space-between; } .textImageRepeater__header { margin: 17px 0; } .textImageRepeater__graphic { margin: 0; } .textImageRepeater__text, .textImageRepeater__graphic { flex-basis: 50%; } .textImageRepeater__text { max-width: 500px; } .c-scrollbar_thumb{ background-color: #5D209F!important; width: 7px; margin: 2px; opacity: 1; border-radius: unset; mix-blend-mode: multiply; } Steps to recreate: Open this fiddle Widen the output box to something wide (i.e. 1300px) Run the fiddle Scroll down and you'll see the elements not loading Resize the output box to something smaller The scrollTrigger animations now appear Here is a gif showcasing the issue:

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

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

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

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

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

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

Hi, I just forked the ScrollTrigger with locomotive scroll codepen example and made some small changes to the javascript code. Basically, I put the code in a class and instead of defining a const locoScroll, I used the this keyword and this.locoScroll. With the class definition and original const declaration, everything works fine, but the code breaks when I use this.locoScroll instead. I realize this might not be related to ScrollTrigger, but since the error is happening inside the ScrollTrigger.scrollerProxy callback, I'd thought I could ask here. Thanks for any help in advance.

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

If i use the Smooth Scroll on my Homepage with the Show and Hide Gsap Trigger Header it doesn t work, it seems there is an conflict. But i cannot figure out, how to solve it. I am using Wordpress with Elementor. This is my Website: https://trustedinfo.de If i active the SmoothScroll Locomotive the Gsap Trigger Header don t working more.. please help me there out Edit: this is my GSAP Trigger SHOW and HIDE Header Javascript Code: ;( function() { // wait until gsap & ScrollTrigger available let chck_if_gsap_loaded = setInterval( function() { if( window.gsap && window.ScrollTrigger ) { // register scrolTrigger gsap.registerPlugin( ScrollTrigger ); // ... do your thing show_hide_header(); // clear interval clearInterval( chck_if_gsap_loaded ); } }, 500 ); function show_hide_header() { const site_header = document.querySelector( "#ob-site-header" ); const show_hide_header = gsap.from( site_header, { yPercent: -100, duration: 0.38, ease: "power2.Out", } ).progress( 1 ); ScrollTrigger.create( { start: "top top-=" + 100, onUpdate: ( self ) => { if( self.direction === -1 ) show_hide_header.play(); else show_hide_header.reverse(); } } ); } } )(); CSS of SHOW and HIDE Header: body:not(.elementor-editor-active) #ob-site-header { position: fixed; z-index: 999; width: 100%; } best regards Emco

Hi, I'm currently testing Locomotive Scroll and Gsap ScrollTrigger, I've read somewhere on the forum that horizontal scroll pin using Locomotive scroll is not that possible (is that correrct?). In fact, each sections are translated, so even though position fixed is set it's still translated, furthermore I think the width of each section is calculated (by Locomotive Scroll) before the "pushing" padding to the section is set. I played with all the pin options (pinType, pinSpacing, pinnedContainer, pinReparent) , without success, I understand in a nutshell what those stuff fixes in general but I haven't been able to make that work properly. So I found a workaround but I was hoping for a "cleaner" way to achieve what I've done. The workaround is to create a wider section (200vw), inside of it a container (100vw), absolute positioned, and translate that container on progress, that work pretty good but I feel that is a hack and I was wondering if I could do it differently. I could use a timeline that I scrub play, but I don't think it's a better solution. The section I'm talking about are the ".section--curtain" one, you need to scroll at the end, that's the 2 fixed sections with curtains opening vertically and horizontally. 1. style="transform: translate(56.3%, 0%) scale(1.1877, 1.18767); translate instead of translate3d? Why? Shouldn't be smoother if translate3d was used? 2. The image is slightly zooming, again on progress but it's not very smooth. on line 160 $('.section--curtain--horizontal').each(function(){ var thisCurtainTop = $(this).find('.curtain--top'); var thisCurtainBottom = $(this).find('.curtain--bottom'); var curtainPin = $(this).find('.curtain-pin'); var thisMedia = $(this).find('.curtain-media'); gsap.to(thisCurtainTop, { yPercent: -100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true, onUpdate: self => { var progress = self.progress.toFixed(3) * 100; //console.log("progress:", self.progress.toFixed(3) * 100); gsap.set(thisMedia, {xPercent: progress, zPercent: 0}); gsap.to(thisMedia, 1, {scale: 1 + progress / 300}) } } }); gsap.to(thisCurtainBottom, { yPercent: 100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true } }); }); $('.section--curtain--vertical').each(function(){ var thisCurtainLeft = $(this).find('.curtain--left'); var thisCurtainRight = $(this).find('.curtain--right'); var curtainPin = $(this).find('.curtain-pin'); var curtainS = $(this).find('.curtains'); var thisMedia = $(this).find('.curtain-media'); var thisVid = $(this).find('video')[0]; gsap.to(thisCurtainLeft, { xPercent: -100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true, onUpdate: self => { var progress = self.progress.toFixed(3) * 100; //console.log("progress:", self.progress.toFixed(3) * 100); gsap.set(thisMedia, {xPercent: progress, zPercent: 0}); gsap.set(curtainS, {xPercent: progress, zPercent: 0}); gsap.to(thisMedia, 1, {scale: 1 + progress / 300}); }, onEnter: () => { thisVid.play(); }, onEnterBack: () => { thisVid.play(); }, onLeave: () => { thisVid.pause(); }, onLeaveBack: () => { thisVid.pause(); }, } }); gsap.to(thisCurtainRight, { xPercent: 100, ease: 'none', scrollTrigger: { trigger: $(this), scroller: '.scroll-wrapper', horizontal: true, scrub: true, //pin: true, //pinType: 'transform', //pinSpacing: 'margin', //pinnedContainer: curtainPin, start: 'left left', end: () => {return '+=' + window.innerWidth + 'px'}, //markers: true, invalidateOnRefresh: true, } }); }); I'm happy if there is some examples, somewhere, hope everything is clear. Thank you

Hello everyone, I'm new to this so please bare with me I have installed a plugin "Oh boiiii steroids" for elementor for Wordpress using LocomotiveScroll + GPSA scroll to. Well, I didn't work on it this week end and today, I'm noticing some glitch. I'm on CHROME PC. It's working fine on filezilla... When I scroll down and then up, some elements disapears or take 1sec to show, or don't show at all. I'm pulling my hair out from this. I trying to use Hello elementor theme, deleting all my custom css/js, removing all plugns. Nothing! I'm sending an SOS here! Thank you for your help

Hello, first of all congratulations on the great work with this library. When using GSAP + Locomotive Scroll, if I assign the data-scroll-section attribute in the sections to improve performance (as locomotive suggests) then, if we have a Scrolltrigger animation using .pin, it breaks. I imagine because it modifies the DOM by adding a parent above said section. What can we do to solve this problem? Here I leave a codepen with a demonstration of what I say: https://codepen.io/animaticss/pen/wvqGBMM Thank you!

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();

Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop. and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. https://codepen.io/akapowl/pen/8a383f202ba53d6b11cc83da39b6f5b5 I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping

I have the following CSS to scroll within a column, but if I include the locomotive library, even without using it, the CSS doesn't work, in fact, it seem like the second line is removed. .sticky-section-wrapper .elementor-widget-wrap { display: block !important; position: sticky; top: 0; } .sticky-section-wrapper .sticky-section { position: sticky; top: 0; } The first line is included just for Safari, but is found in Chrome, whereas the second line doesn't appear at all Regards Pete

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