Search the Community

If I remove Locomotive scroll from the equation it seems to work fine. So maybe there's something related to that that you can fix like refreshing it when the buttons are clicked. If you have a question specific to GSAP please let us know and we'll do our best to help!

Hi there With reference to attached codepen url, the problem is pinning is not working on the section with parallax background with locomotive scroll and the section gets blank and all content is hidden. Does anyone knows what's causing this issue and how to solve it. Regards, Shehzad Asif

Yeah, that can be the case for sure. I'm a bit short on time. ? Edit: I definitely was Putting the ScrollTrigger.sort() at the very end (after the adding of the eventListener for locomotive-scroll and the .refresh() works just fine. I had tried putting it in before those before. https://codepen.io/akapowl/pen/8a3fde0fb95ad685f977702c2f323c17 Wit this, the refreshPriority is not actually neccessary anymore on the ScrollTrigger, I put it on before @kobracode. Might be an interesting read for you anyways (from the docs): refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

Hello, i am using locomotive and gsap scroll trigger. i Have 2 titles ( fade-up-title and fade-up-subtitle), i need in first, the title to fade-up then Pin till the second(subtitle animation complete) and then start the fading-up (the .to function) var tls = gsap.timeline({ scrollTrigger: { trigger: ".text-banner", scroller: ".o-scroll", scrub: true, start: "top top", end: "+=100%" } }); tls.set('.fade-up-title span', { autoAlpha: 0, y: 100, }).fromTo('.fade-up-title span', { autoAlpha: 0, y: 100, }, { autoAlpha: 1, y: 0, }).to('.fade-up-title span', { autoAlpha: 0, y: -100}); tls.fromTo('.fade-up-subtitle span', { autoAlpha: 0, y: 100, }, { autoAlpha: 1, stagger: 0.05, // stagger start times y: 0, }).to('.fade-up-subtitle span', { autoAlpha: 0, y: -100 })

Great, i faced that issue cause i used locomotive effects and scrolltrigger. Sth last i need after section text, when this sections finish to display one more section below, but without scrolling (when text section finishes, the new section should be already there, like(position:absolute;top:0;left:0;width:100%;height:100% and i will apply a fade in) how i can do that? like scrolling the 100vh.

I'd guess destroy. I haven't used Locomotive too much though. Killing off the ScrollTriggers that are no longer used or ones that are recreated is a good idea.

That sounds like you need to kill off the old Locomotive instance before creating the new one. If you have a specific question that we can help out with please let us know. Best of luck getting this figured out!

Hey Zach, thanks for the warm welcome. I'd figured it was just a case of me not fully understanding the requirements haha. I've tried your solution but I've run into a bit of a problem that's preventing me from seeing if it's worked. The issues with the viewport are fixed but it seems the scrolling element I've defined doesn't change to the new one when going to different pages, meaning I get an error. It happens because my App component is only mounted once on the first load and isn't reloaded on a route change so the scroller method is only fired once. I tried to remedy the this with some Vue stuff and by stopping and destroying the first LocomotiveScroll object and creating a new one but I've run into a bit of a brick wall. Here's the modified code (in the script tag of the sfc): import {gsap} from 'gsap'; import {ScrollTrigger} from "gsap/dist/ScrollTrigger"; import LocomotiveScroll from 'locomotive-scroll'; export default { name: 'App', data() { return { locoScroll: null, } }, computed: { tag() { return '.page .full-page'; } }, watch: { // When the route changes ... $route(to, from) { this.$nextTick(this.setScroll); } }, methods: { scroller() { const scroller = document.querySelector(this.tag); if (this.locoScroll !== null) { this.locoScroll.stop(); this.locoScroll.destroy(); } scroller.setAttribute("data-scroll-speed", "0.5"); scroller.setAttribute("data-scroll", ""); return scroller; }, setScroll() { const scroller = this.scroller(); let locoScroll; this.locoScroll = locoScroll = new LocomotiveScroll({ el: scroller, smooth: true }); gsap.registerPlugin(ScrollTrigger); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(this.tag, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight } }, pinType: scroller.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); } }, mounted() { // Now that it's a div it is mounted after the app is, so wait until all content loaded window.addEventListener("load", this.setScroll); } } I'm now met with a Uncaught (in promise) TypeError: Cannot read property 'match' of undefined if (window.getComputedStyle) { var n = getComputedStyle(t) , r = n.transform || n.webkitTransform || n.mozTransform , i = r.match(/^matrix3d\((.+)\)$/); // Here return i ? (e.x = i ? parseFloat(i[1].split(", ")[12]) : 0, e.y = i ? parseFloat(i[1].split(", ")[13]) : 0) : (i = r.match(/^matrix\((.+)\)$/), e.x = i ? parseFloat(i[1].split(", ")[4]) : 0, e.y = i ? parseFloat(i[1].split(", ")[5]) : 0), e } Could it be because I'm re-registering the plugin on each page load? This all seems a bit hacky and I'm sure there's a better way to go about this but my knowledge is very limited.

Hey Inkblot and welcome to the GreenSock forums. This is a requirement of smooth scrolling libraries like Locomotive. This is because virtual scrolling (the technique that smooth scrolling libraries need to use) has to be independent from the normal scrolling in order to keep things perfectly smooth. It's not a requirement of ScrollTrigger. You should be able to fix this by putting the cursor in a container whose dimensions are the same as the viewport and hiding the overflow for that container. I'm guessing that these elements are within your smooth scrolling container. They should be outside of the smooth scrolling container and then they should work normally. This exact reason for why this is happening depends on how you have it set up. Given you don't show it in your demo we can't say for sure. I would recommend using fixed positioning for this element (making sure it's outside of the smooth scrolling container as instructed above) and refactor your code to work with that if it didn't already have fixed positioning. Ultimately none of your questions have to do with GSAP or ScrollTrigger specifically but hopefully the above is helpful anyways

Hello, everyone. Please tell me what I am doing wrong. I want to achieve an effect like in this example: https://codepen.io/mikeK/pen/xxVLwzJ Only with locomotive scroll. Here is my demonstration. Where did I make a mistake? My sections do not change color.

Hey @akapowl, thanks for the reply. I did try with locomotive or smooth-scroll but I have the same issue still happening. I believe it is probably a react issue with my dom fully loading after my gsap animation so that the height given to gsap is wrong. Anyway for now I will live it aside because I am not so sure I want some smooth scrolling on my app for user experience.

Hey @maxvia Have you hooked locomotive-scroll up to ScrollTrigger via .scrollerProxy? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() If not, check out the demo on that docs-page linked to, for an example on how to hook it up. If so, and you still cant get it working, please create a minimal demo (even without your react environment could help), so it's easier to help.

Hi Jack I am using locomotive for some time and did not face any problem like yours. All things scrolling, scrubbing and pinning works perfectly but a demo would be good thing to explore the problem. Regards, Shehzad Asif

Hey @dhaliwallambi I got your locomotive-scroll working in your demo by setting overflow: hidden to your .data-scroll-container via CSS. Your scrollTriggers on the other hand are not working in the demo, because you are not setting that div as the scroller. I can not tell you anything on the .batch method you want to use - and since I don't see anything in that direction in your code, and you actually only have those 5 images, I think what you maybe could want to do instead, is loop over those images, and create a ScrollTrigger for each of those individually. Which would then look something like this https://codepen.io/akapowl/pen/f4805584f20a464246d9eb0a953ed3e1 What I did there was first set up an array with all your items with the class .z-out let images = gsap.utils.toArray('.z-out') and then target each of them seperately with an individual ScrollTrigger and Timeline in a .forEach loop. Hope that makes sense to you and helps get a slightly better understanding. Cheers, Paul

Thank you so much! I figured since locomotive sets html and body to overflow: hidden when you activate smooth scroll I wouldn't have to, but setting overflow: hidden in my own css helped. I guess it manages to paint with the scrollbar just before the classes get applied that sets hidden on html and body.

What specifically isn't working? The smooth scrolling? Are you aware of Locomotive's smoothMobile option?

Hi guys, this looks great and is almost exactly what I'm after for a project of my own. I'm very new to ScrollTrigger and I wondered if someone could help me out with removing Locomotive Scroll from Camerons example? It's really just the pinning and horizontal scrolling I'm after. Any other examples I've found rely on full width sections, I like how this approach allows for content of any width and calculates the scrolling automatically. Thank you!

Hi @zloycoder Thank you for your hard work putting this together. I have a question, how do I change the scroll to locomotive scroll and still make it work? I've switched it out, but I just can't get it to work. Please could you have a look at it for me? Any pointers will be such a help. Thank you https://codepen.io/NewbieRuby/pen/XWKQQmM

Yeah, I saw that line once, when playing with a locomotive-scroll demo, but since i never really use that smooth-scrolling-library myself, I don't always remember all the bells and whistles that come with it (or everything, that the real pros at Greensock here have already taken into account) - otherwise I would have linked you to it in the first place. I am glad though, the solution to your issue was that easy in the end. Happy smooth-scrolling

I ended up adding the following line based off this GSAP example: Locomotive Scroll x ScrollTrigger and it seemed to fix it for me for both mobile & desktop ?Thanks for the pro tips Paul. pinType: document.querySelector(".container").style.transform ? "transform" : "fixed"

Hy There If anyone already implemented or can implement the above mentioned smooth scroll library with scrolltrigger. Pls share here. I thinks it is the best library for smooth scroll purpose as it provides the perfect balance between regular smooth scroll like asscroll and locomotive. Demo section of the library can explain better what I am saying. Or Zach as you are the master of GSAP. It would be awesome if you can do this from your busy schedule. I am also working on it but got stuck with pinning not working and animation triggers a bit before the target viewport. Regards, Shehzad Asif

@akapowl. Thanks for the video. @zach. I tried asscroll, locomotive and virtual scroll or even javascript and gsap smooth scroll but all with same issue. There must be a solution to this. I saw some websites with smooth scroll and without flickering even on chromium based browsers(alitwotimes website is a great example). Wondering how they controlled it?

Hello everyone, thanks guys for gsap and all about it. I use barba + locomotive + gsap on my project, i try to destroy all ScrollTriggers with ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); But i have some errors from ScrollerProxy, and i think my code doesnt destroy all ScrollTriggers, especially scrollerProxy. There my code for scrollerProxy, almost duplicate from docs if (scrollContainer) { window.locoInstance.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? window.locoInstance.scrollTo(value, 0, 0) : window.locoInstance.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollContainer.style.transform ? 'transform' : 'fixed', }) } There error Uncaught TypeError: Cannot read property 'scroll' of null at ScrollTrigger.scrollTop [as scroll] at _updateAll Sorry for my english, sorry it's not codepen, and if it's something stupid, i just tired and don't know why and how to fix this, thanks

I managed to make, as it seems to me, quite a good image parallax together with a smooth Locomotive scroll: https://codepen.io/MarkTan/pen/eYzVGjY?editors=0110 If someone has optimization tips, I would be happy to hear them ?

I would like to enable parallax for my images and have smooth scrolling using Locomotive. Please tell me what is wrong with my example and how can I add a parallax there? ... P.S. Open the full screen version to display the images correctly.