Search the Community

I made this animation using Scroll-Trigger. The concept is to scroll normally through the main page until reaching a specific section. This section is pinned, and its subsections are stacked and animated one over the other on scroll. Once the last subsection is reached, the main page continues with normal scrolling. However, when I try to add Scroll-Smoother to the page, the animation doesn't work. I would be grateful if you could help me. Thank you in advance!

Hi there, my app / wegpage suffers from odd scroll behaviour. I gave the debuggin quite some time but nothing seems to work. I use a ScrollSmoother and several ScrollTriggers with snap to labels in nuxt. When one enters the page first time everything works as expected, after navigation / route chnage. the page scrolls to a positon (It seems like the last one on previous page.) Disabling ScrollSmooter helps. Or removing the snap from the triggers also fixes the issue. But maybe I am doing something wrong and I would not have to decided which one to use. I created a stackblitz based on the starter template. it replicates the issues quite well. Steps to reproduce Scroll down the first page (home) to anywhere a bit Change to "Images" in naviagtion Scroll a bit down the page Wait 1s or so, page starts to scroll somewhere https://stackblitz.com/edit/nuxt-starter-txte1rew?file=pages%2Fimages.vue thx for the support.

Hi everyone, I can't get my custom cursor to trigger when the target is hovered over during scrolling. Could you show me how to achieve this based on the following example? Thank you! https://codepen.io/GreenSock/pen/GRYLMzX

Thank you to the people behind this great library! I am facing this issue that when the user tries to navigate through the site using their keyboard, we can see that the page jumps around randomly. The issue only occurs on Safari, with Voice Over on and when ScrollSmoother is enabled. I have created a quick demo of this issue on CodeSandbox. In order to make it work I've just added a div with some spacing so the jumping around is more evident. Here is the preview. And here is a video of the issue in case there is trouble in reproducing it: TIA! 🙌

A website I am working on here: https:clients.tbmedia.ca/nal - is working fine on desktop, but have had some issue on mobile. ScrollSmoother.create({ wrapper: "#page", content: "#content", smooth: 1, normalizeScroll: true, effects: true }); ^ This is the code for mobile I have an if statement that adds normalizeScroll because if I don't the ScrollTrigger horizontal animation seems to be very jittery on horizontal scroll. document.addEventListener("DOMContentLoaded", function () { if ($('section').hasClass("community-pin-scroll")) { const svgElement = document.querySelector(".community-svg"); svgElement.style.width = "100%"; // Ensure consistent width svgElement.style.height = "auto"; // Ensure consistent height const races = document.querySelector(".horizontal-scroll-container"); function getScrollAmount() { return -(races.scrollWidth - window.innerWidth); } let tween = gsap.to(races, { x: getScrollAmount, duration: 3, ease: "none", }); ScrollTrigger.create({ trigger: "#community", start: "top top", end: () => `+=${races.scrollWidth - window.innerWidth}`, pin: true, animation: tween, scrub: 1, normalizeScroll: true, // horizontal: true, invalidateOnRefresh: true, pinSpacing: true, }); // ScrollTrigger.refresh(); window.addEventListener('resize', () => { ScrollTrigger.refresh(); }); } }); It feels as if the page jumps and sticks, this only seems to be an issue on mobile (not as bad on mobile chrome than safari) is there anything that jumps out immediately with my JS? If I remove ScrollSmoother completely on mobile the page scrolls fine but then I get a white flashing and empty space on my scrolltrigger horizontal animation.

Hello all! I'm focusing on overall performance and making websites as smooth as possible on all major browsers. I have some issues that been working on for couple of days and could not get it as i want or even understand why things are happening... 1. On my other machine (mac mini 2018) i have a screen that supports 4k images, however on Safari and Chrome the main banner with text sliding from both sides is not smooth and is a bit glitchy https://chemstone.designwildwest.com/ FYI: On my Window computer i have a screen that supports 2k images and everything is smooth and works okay. This below is an animation for image it self and scrollsmoother: // hero image reveal function revealHeroItem(elem, direction) { gsap.to(elem, { duration: 1.5, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", }); gsap.from(elem.querySelectorAll(".img-cover"), { duration: 2.5, autoAlpha: 0, opacity: 0, scale: 1.1, }); } const imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top bottom-=15%", onLeaveBack: (self) => self.disable(), onEnter: function () { revealHeroItem(section); }, }, }); // scroll smoother init window.addEventListener("load", (event) => { ("use strict"); let smoother = ScrollSmoother.create({ smooth: 2.5, smoothTouch: false, ignoreMobileResize: true, wrapper: "#smooth-wrapper", content: "#smooth-content" }); }); Does anybody know/have an idea how to debug it and see if it is a gsap fault or the computer is to slow or something like that? The scrollSmoother init should be done once all assets are loaded? Sorry for being a bit chaotic in this post but its kind a hard to explain.. once somebody answer i can provide more detalited code/information. thanks Guyz

Hi There, I have been using GSAP for a while and am comfortable with a lot of the basics but am trying to recreate the scrolling and click interaction effects seen on this page: https://halfof8.com/about You can see that each 'section' is vertically scrollable and then when user gets to bottom of that 'section' the whole section horizontally scrolls over and the next vertical scrollable 'section' starts. This is the biggest issue for me as you can see in the example I provided. I have the vertical scrolling working but you'll see the next 'section' in is not where it is in the example. The example sort of mimics a standard slider/carousel where the next item is queued up to go whereas with scrollTrigger I am stuck with the next section being adjacent to the bottom of the current vertically scrollable section. The other issue I am having is I cannot get scrollTo to scroll to the top of next section, it either scrolls to bottom of current vertical section or over to the correct next section but too far down. Any help would be appreciated, I'm trying to be as clear as possible. My skills may not be quite there or maybe this is something better left for an application outside of GSAP. Thanks for you time.

I'm working on a project where I'm using GSAP, ScrollTrigger, and scrollsmoother. I have a fixed element that I want to remain fixed until ScrollTrigger is fired, at which point I want it to move along with the rest of the page smoothly. I've attempted two approaches: one with the fixed element positioned outside the id="smooth-content" container (https://codepen.io/mp1985/pen/ZENOaeg) and another with the same element positioned absolutely within the id="smooth-content" container (https://codepen.io/mp1985/pen/LYoZOmW). However, I'm encountering difficulties in achieving the desired behavior. Is there a recommended approach to accomplish this? is there a way to obtain the scroll value when ScrollTrigger is fired so then I can synchronize the movement of the fixed (or absolute) element accordingly? Any insights or guidance would be greatly appreciated!

Hello, I thought my 2 rows horizontal scroll slider was working well, but there is a weird issue, could you please have a look to this pen ? The scroll slider itself looks working well, but once we start using mouse click (left or right) on the first row elements, there is a strange "jump" behavior. Please first scroll down then try to click multiple time (only into the first row elements) in order to be able to reproduce the issue. Outside the scrollsmoother, no issue anymore. What did I missed ? Any ideas ? Thanks akal

The page lags if you use ScrollSmother and if it is very long If at the end to do ScrollTrigger.refresh(), then everything is fine but then it can sometimes jump from the initial position to the one where I called it IRSPlus (qclay.site)

I just got a problem in my project: I have a header with a background image with the property background-attachement: fixed; My header have to be in the wrapper and the smooth-content because it have children with effects from the plugin. How can I make this background to be fixed, I thought about a way to make this property more important than the plugin effects to get the priority and make everything work but idk how.

For those looking to integrate ScrollSmoother with Nuxt, here's a solution that builds off some of the work by @Born05 in this thread. CodeSandbox: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-pbhmeh?file=/layouts/default.vue All you have to do is include the GSAPScrollSmoother and put whatever content you want inside of this. <GSAPScrollSmoother :vars="{ smooth: 2, effects: true }"> <Nuxt /> </GSAPScrollSmoother> You'll be able to access the ScrollSmoother in any page/component using this.$scrollSmoother, and can use any of the methods available, for example. this.$scrollSmoother.paused(true); let velocity = this.$scrollSmoother.getVelocity(); There are also a couple of extra methods available. $scrollSmoother.parseEffects() Call this to get ScrollTrigger to parse and create effects that are declared with data attributes, (data-speed and data-lag). $scrollSmoother.killEffects() Call this to kill all the ScrollSmoother effects. You will typically need to call this when navigating to a new page. $scrollSmoother.refresh() Refresh the ScrollSmoother and all ScrollTriggers. You should call this when navigating to a new page if you don't call .parseEffects() There are really only 2 files you need to be concerned about. The GSAPScrollSmoother.vue component file, and the nuxt.config.js file. The nuxt.config.js has some pageTransition callbacks in there that you may need to adjust to your project. And if you plan on using this in your own project, be sure to change all the gsap-trial imports to gsap, otherwise you won't be able to deploy it. Example usage on a page... export default { mounted() { // if you don't have any effects, use this.$scrollSmoother.refresh() instead this.$scrollSmoother.parseEffects(); this.myAnimation = gsap.timeline({ scrollTrigger: { ... } }) }, beforeDestroy() { // kill any ScrollTriggers you created this.myAnimation.scrollTrigger.kill(); // kill the effects that were created this.$scrollSmoother.killEffects(); } }

In my previous thread Jack suggested using gsap.defaults instead of gsap.config to set force3d for all upcoming gsap animations on the fly... The solution works but it all falls apart if I try setting gsap.defaults({force3d:true}) before creating ScrollSmoother instance. It throws console warning: Invalid property force3D set to true Missing plugin? gsap.registerPlugin() And the scrollTriggers inside stop working as intended. Is this a bug or intended behavior? I was only able to track down the error connection to ScrollSmoother so far, however in my app I'm working in, I have to make the initial force3D defaults call on a 1 second timer because it still sometimes throws the error, and I can't properly debug it because stack trace always points to the gsap.registerPlugin(ScrollToPlugin,ScrollTrigger,DrawSVGPlugin,ScrollSmoother); line in my code. In codepen example, you can see how the behavior differs when you set things up in different order. If you toggle force3d first and then setup scrollSmoother it all falls apart, however it has no effect on ScrollTrigger... (The random ball flying around is to check if switching of force3d has effect on created tweens since the ball generates new gsap animation for each move)

Hi there, Apologies that this is a nextjs question but thought someone must have come across this scenario already. My question is, do I need to store the 'smoother' instance in some global context in order to use smoother.effects outside of the layout file where Scrollsmoother is instantiated? I've attached a simple example, where Scrollsmoother instantiated in layout.tsx file but I'd like to use it's effects in a page.tsx file. It obviously can't use 'smoother' variable in page.tsx as it only exists in layout.tsx. https://stackblitz.com/edit/stackblitz-starters-ajea61?file=app%2Fpage.tsx Thank you!

Hi there! I think I've found a bug for a [possibly pretty rare] case with the following setup: page consists of pre-defined fixed height sections. each section has a ScrollTrigger (1) which just watches if a section becomes visible on the screen. each ScrollTrigger (1) may create an additional ScrollTrigger (2) which uses pinned container. for the case, it doesn't matter what else happens along with creating an instance of (2), but originally there's a complex setup of various stuff so it makes sense to mount/unmount extra content and logic according to triggering (1). all the page is wrapped into a ScrollSmoother. Actual result is that at the moment a dynamic ScrollTrigger (2) is created, smoothed scroll 'jumps' a bit towards scroll direction; the size of the jump depends on scroll speed. Also I've confirmed that it's not a performance lag. Removing whether a ScrollSmoother or a pin in (2) fixes the issue. Would love to hear some ideas/hints on how this can be fixed, although I'm also currently thinking about a workaround where I would pre-create pinned containers and try to setup nested ScrollTriggers based on them... Thank you!

is it possible to control SmoothScroller request animation frame (updates) externally ? I have react app and i need to sychnronyze better SmoothScroller with other animations i have going, and i would like to do smoothscroller animation/position calculation togetehr with my other animation.

Hello, I use link anchor in my project to scroll within the page, but when I use the "fadeup" animation in my project, the "anchor" throws the page down a little with an incorrect calculation. can we help?

Hi, I was trying to integrate smooth scrolling with nextjs in the page router. I was successful with react. But in nextjs the window is not even scrolling : (. Can anyone point me to where I am wrong... React working link : https://stackblitz.com/edit/react-yazbek?file=src%2FApp.js Here's the stackblitz's Nextjs link : https://stackblitz.com/edit/next-typescript-xhd7tv?file=pages%2Findex.tsx

Hi! I'm trying to use Scrollsmoother but I have a problem with lazyload images. The scroll doesn't refresh or update when images are loaded. Maybe it could nice a method for refresh or update scrollsmoother. Anyone has a solution for this? Thanks!

Just bumping this here in case it's useful for anyone else. Navigate to this url to see it working. https://cdpn.io/pen/debug/XWVvMGr#section3

Hello everyone, could you tell me how I can get rid of the skips when scrolling the page? I use deferred image loading and update the scroll trigger every time an image is loaded https://codepen.io/a-glinskiy/pen/ZEVGXxj

Hi. Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines. I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible. Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned? timeline code is here if it helps: let tl = gsap.timeline({ onUpdate: render, defaults: { ease: 'none', }, scrollTrigger: { trigger: section, pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: '+=1000%', // end after scrolling 500px beyond the start scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1 anticipatePin: 1, invalidateOnRefresh: true, }, })

Hello, I'm pretty new with gsap. When I scrollsmoother is activated, it's like the "viewport" is being reduced when I scroll down. Behavior expected : https://codepen.io/amazingweb/pen/VwVdBBw The code only works in desktop for now (>991px)

Hello, vibrations occur in the borderline with the scrollsmoother plugin. To resolve this "will-change: transform;" I used it but the problem persists. Can you help me? #smooth-content { will-change: transform; } "* { will-change: transform; }" > As soon as I apply this the page is completely broken css Video https://streamable.com/1cc12y

Hi, I have recently downloaded a ZIP file containing bonus plugins, and installed it according to your installation guide. I put gsap-bonus.tgz file into the main folder and ran npm install --save-dev ./gsap-bonus.tgz. I import gsap and necessary plugins and register them in my Scroll.ts file, which is responsible for scrolling effects. When I compile the code, I get the error: I logged the gsap object in Observer.js and it turned out to be undefined. What am I doing wrong?