Search the Community

Hi Everyone! Pls help me I have a trouble with the integration of GSAP and Locomotive Scroll When i tried to make an animation on both scripts the animation of Motion Path is going a little slow and looks like frame and frame animation, and i dont know how to solve it ! any idea? Thanks to everyone

Hi guys, So I checked GSAP example on Locomotive Scroll and I found out that it doesn't work again... I understand that the GSAP team is not managing locomotive and it's a third-party dependency I could say, but considering the fact that it's one of the listed examples in the docs... If it's no longer compatible with GSAP, I think it will be better GSAP remove it from the docs... Even the current example shown the in the docs is not working... Kindly check...

Hello everyone, I created this simple animation using GSAP tween, timeline and the ScrollTrigger plugin. The animation works perfectly, but when I integrate the third-party library Locomotive Scroll into the project, the property end: 'max' does not work correctly. To build the animation I followed point by point the suggestions you provided in the example at the following link. https://codepen.io/GreenSock/pen/zYrELYe I know this is not a GSAP product but I still hope someone will be able to help me. Thanks in advance.

Hi, I need help with the scrolltrigger, I made a horizontal scroll website with the help of Locomotive Scroll, I need to use the scrolltrigger but I don't know how to set it up. My goal is to be able to add animations when I scroll to some section (for example, in the second section I want the image to be displayed only when I'm halfway through the second section), is it possible to do this? I found something similar, but it's vertical scroll and I need horizontal https://codepen.io/GreenSock/pen/zYrELYe

Hello, I was building entire multi page website with using GSAP only in Next.js for scroll trigger on every page for some elements. At, last I decided to also add locomotive scroll as well. But after adding it to the project all scroll trigger doesn't work at any page. Why is that I cannot find the answer. Also is there any method to achieve smooth scroll without disabling scroll trigger. Thank You !

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:

Guys I have a quetion I used Locomotive scroll and GSAP scroll Proxy but it casues extra scroll. This only happens with Mouse wheel and not the scroll-bar! gsap.registerPlugin(ScrollTrigger); const locoScroll = new LocomotiveScroll({ el: document.querySelector(".content-wr"), smooth: true }); ScrollTrigger.scrollerProxy(".content-wr", { 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(".content-wr").style.transform ? "transform" : "fixed" });

Guys I have a question. I have this code but it's not working with Scrolltrigger.matchmedia I mean when I remove the mathMedia everything works fine but with this nothing works fine! I use Locomotive Scroll BTW! gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "(min-width: 800px)": function() { const imgwr = document.querySelector(".small-image-wr") gsap.utils.toArray(".small-image-wr").forEach((imgwr, i) => { imgwr.img = imgwr.querySelector(".img-4"); gsap.from(imgwr.img, { yPercent: 10, }); gsap.to(imgwr.img, { yPercent: -10, ease: "none", scrollTrigger: { trigger: imgwr, scroller: ".sections-wr", scrub: true, invalidateOnRefresh: true } }); }); }, "(min-width: 800px)": function() { const projectimg = document.querySelector(".project-image") gsap.utils.toArray(".project-image").forEach((projectimg, i) => { projectimg.img = projectimg.querySelector(".img-5"); gsap.from(projectimg.img, { yPercent: 10, }); gsap.to(projectimg.img, { yPercent: -10, ease: "none", scrollTrigger: { trigger: projectimg, scroller: ".sections-wr", scrub: true, invalidateOnRefresh: true } }); }); } });

Hi all, I'm experiencing an issue with Locomotive Scroll + GSAP ScrollTrigger. As soon as I add a "data-scroll-speed" to an element which is different from 0 it seems like the trigger is completely off and I don't know what I'm doing wrong. I would like to start the animation on all the elements as soon as they enter the viewport, this works as long as I don't change the "data-scroll-speed". I've added a minimal demo and the very last element has a "data-scroll-speed" set to 3. As you can see the opacity changes from 0 to 1 but not when the element enters the viewport. I'm quite new to GSAP, Locomotive Scroll and JS in general and I'm hoping someone in the forums can get me back on track. I've tried for countless hours to wrap my head around this, so this is my first post in the forums and my very first Codepen ever :-). Thank you in advance!

I have been taking almost a week to solve this problem by myself, my problem is that if I add snap in scroller trigger variables, there is a pin spacing increasing and moving on the top, but the snap effect is working, since I really want this effect of compulsory snap scroll. If I remove snap variable everything is fine. I dont know how to use CodePen to show my code since I am using reactJs and I am the beginner of gsap and locomotive scroll, I want to make the website have the smooth behavior moving( locomotive scroll ) and gsap horizontal scroll at the same time. I pushed my code onto Github, please whoever and take time to solve my confusion. The related file are App.js, App.scss, HorizontalScroll.jsx, useGsap.js, useLocoScroll.js , the rest of it please ignore: https://github.com/Derek-Y1106/Testing

Hi! @akapowl helped me out yesterday to get pinned animation working with Locomotive and Barba, but after that i've realised that pinSpacing is not working as expected after going to the other page and coming back. https://stackblitz.com/edit/web-platform-vhx7k3?file=index.html,styles.css,index.js Also, the animation jumps on mobile, and if remove the code below it works but it is extremely jittery. pinType: container.querySelector('[data-scroll-container]').style .transform ? 'transform' : 'fixed',

Hi guys, a question. Why the text jumping when I scroll with the mouse wheel? Normal behaviour with touchpad!

Hi, Hopefully you are all doing well. I have a problem with locomotive scroll. Here is the url : https://tensixteenbio.wpengine.com/ user: tensixteenbio pass: 610a89b4 My problem is when you click on any dropdown menu, then the new page will be broken means there is lot of white space uderneath the page. anchor links on locomotive scroll don't work as expected or when you click them from the header navigation.They seem to load on page refresh but not first click (content missing and other blank areas). example: https://watch.screencastify.com/v/OIJ2ofC7cOh10E0MYLEo Looking forward to hearing from your kind resposne. Thank you!

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

Hey guys, I am currently trying to create a horizontal slider similar to this one: https://codepen.io/GreenSock/pen/JjYPgdp But unfortunately I can't do it. The slides should take up 100% of the 1200px wide container and change as you scroll. Unfortunately, the other posts in the forum didn't help me either, maybe someone here can help me. Thanks in advance.

hello, i am using gsap scroll trigger, and it is working, and i want to combine it with locomotive scroll but its not working. and how to add back to top function?

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 how to make slow scrolling hero section like on this site https://custo.io/ and how disable smooth scroll on mobile viewport

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, I have an issue with the locomotive scroll and scroll trigger pin, but it's only happening on mobile. This issue can also be seen on the scrollProxy doc example in codepen Somehow, the moment the scroll enters the pin section and the scroll speed is too fast, there will be a flash of white space that only appears for a few milliseconds. As seen in this video. Sometimes the section event gets detached and stacked on top of the other section White space: 00:05 00:24. Section detached: 00:42 Thanks for your help and for this amazing product! * Recorded on Android

Hello, how to make Back to top with progress indicator like this: i use locomotive scroll in html I use it, but it not work : Back to top with progress indicator 2 (codepen.io)

Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !!

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, i encounter a problem trying to use Locomotive Scroll and Barba, the pinned section is in wrong position on the initial load, but after going to next page and coming back it works fine. I've combined to demos that i found to show the problem. https://codesandbox.io/embed/smoosh-hill-qb6er4?fontsize=14&hidenavigation=1&theme=dark LE: By providing the demo i found out that resizing the window (in codesandbox) it works fine but i still don't know how to solve it. The actual question: how can i add ScrollTrigger.refresh() without resizing the window?

Hi, I'm moving from Locomotive to ScrollSmoother. When my testimonial changes size, the area beneath the footer is huge. Or when I resize a text box I have the same problem. So is there a version of "locoScroll.Update", "locoScroll.Start" and "locoScroll.Stop" for gsap? $('.testimonials').on('afterChange', function(){ locoScroll.update();ScrollTrigger.refresh(); console.log("after") }); I've read the docs, but maybe I'm not searching for the right terms