Search the Community

Hello, I just can’t figure out how to set up a smooth sliding of the title (targetTitle) and colored blocks (targetImg, targetImg2). When scrolling through the page, they move very quickly. I've experimented with the duration parameter, but it doesn't give any results. I tried to add ScrollSmoother, the page began to scroll smoothly, but this did not affect the block (target). I don't understand what I'm doing wrong. And for some reason, the marker end: 'bottom bottom' does not reach the bottom of the block (target). Can someone explain why this is happening and how to add smoothness to the elements?

Hello good day, I have an issue within scrollTrigger and scrollSmoother. Sometimes my website loads all animations correctly, other times incompletely. I think it has to do with the fact that scrollTrigger has already finished doing its calculations but the page hasn't finished loading all its elements yet. The reason is that if I scale the browser window, it fixes Is there a way to update or refresh scrollTrigger or scrollSmoother? For example, refresh when some DIV enters the viewport or when all elements finish loading? I tried adding ScrollTrigger.refresh() like this code below, but I am not sure how to implement it gsap.to('.amenidadSectionColBottom', { opacity: 1, ease: 'none', scrollTrigger: { trigger: '#amenidadSection', start: '30% 80%', end: '50% 70%', scrub: true, onEnter: () => ScrollTrigger.refresh(), } }); Thanks in advanced for your help

Hi, in the example i have cards with two trigger each card. First trigger scale the card and the second trigger pin the card. When I've added ScrollSmoother the start and the end of the scale trigger generates the issue and only the first scrolltrigger correctly works. Any help would be greatly appreciated. Thanks

I am experiencing an issue with the integration of the Smooth Scrolling plugin and GSAP. The issue occurs when using a FAQ section or any accordion, or when the height of the pages decreases in any way, resulting in a shaking page. I have attached a video for illustration purposes. The issue can be resolved by disabling the smooth scrolling feature but I want the smoothscrolling plugin. I would appreciate your assistance in resolving this issue. Here is the Video https://www.loom.com/share/55ad04d7fc56436987d55f69c2898a3c If you want to check the live example, you can check that here as well https://wealcoder.com/dev/html/axtra/faq.html

Hello. This is my first proper project with GSAP, been enjoying learning and animating with it. 🙂 I have this example on codesandbox. It uses ScrollSmoother, ScrollTrigger and some timeline animations on text. Everything works perfectly in the dev preview with npm run dev. But when I build the project with npm run build then npm run start, many of the animations just dont run. Especially when using nested timelines. All of the calls are inside a useIsomorphicLayoutEffect hook and I've used context and refs everywhere. Here are some findings: The animations run when I take out ScrollSmoother (But I want to keep it) When I take the ScrollTrigger out, the animation will run All runs fine on the dev preview I wonder if anyone has had similar issues or can shine a light on what might be causing it? Preview: https://yu9mle-3000.preview.csb.app/ Build: https://modernage-web-git-main-modern-age-digital.vercel.app/ Thanks!

Hey! I was looking into the scrollSmoother plugin for my client. And I came across a strange behavior in the codePen, which is present in the documentation. When the window is resized, the page scroll position jumps to the top and smoothly scrolls to the current position. Looks like a bug? Or did I not understand something? Here is a video demo Link to the documentation, where this codepen

Hello, with vertical scroll, we can make parallax or scrolling effect very simply with data-speed="value". How can we do this with horizontal scroll? Is there a method? An example I created to do this; https://codepen.io/sukruemanet/pen/dyKWeOg

Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html

If a smoother hasn't been initialized, `ScrollSmoother.get()` will return undefined. This should be reflected in the typing of the get function. The return type is currently `ScrollSmoother`, but it should be `ScrollSmoother | undefined`

code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?

Hi there. I'm trying to use scrollSmoother for smooth scrolling and various effects. However, i've run into a strange issue. In the example linked, I am using mix-blend-mode to create a "knockout" text effect over a video background. Then I'm pinning the section beneath with scrolltrigger. As you can see, the pinned section is choppy and glitchy looking on scroll. Removing mix-blend-mode on the text section seems to immediately solve this. Just that one line. I don't understand how the two are related, but I'd like to achieve the effect I'm going for with mix blend mode and still have smooth pins using scroll trigger. Any ideas here?

Hello, first of all, the problem is; I am making a project with gsap. I want parallax to work on desktop version and I have succeeded. When the menu opens, I wanted to pause the body scroll, which works successfully. But there was a problem. I can't pause sroll in mobile version because the project is not loaded in GSAP (768px) resolution. I want to pause body scroll in both mobile and desktop versions. I am sharing the code and codepen link with you. Can you help me? console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother; const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }); return () => smoother.kill(); });

Hi, I'm in the process of building a website where on /work, the user will start scrolling from the bottom of smooth-content(main, in codepen example) I'm using scroolSmoother alongside other GSAP libraries. Guess the code is quite simple—but I'm new to this. I would wanna think that I need to do some kind of "scroll-to-end-of-smooth-content" thing. Not really sure. Looking forward to hearing from you Thanks a lot!

Hello, I'm working on a rather large one page website with loads of different tweens, scrolltriggers, pins, timelines, etc. The site uses the ScrollSmoother plugin for smooth scrolling but i noticed weird behaviour when using the smooth scroll. I've included a pen to mimic the part that's causing problems When using ScrollTrigger.refresh() the order of the triggers being refreshed is different when using the ScrollSmoother. In the included pen i have 3 sections with 3 different types of animation. the order of the tweens in js is not the same as the order of the sections: 1 - normal tween with scrolltrigger - section #2 2 - timeline tween with scrolltrigger - section #3 3 - Scrolltrigger.create() - section #1 When not using the ScrollSmoother, the refresh order is: 1 - 2 -3 (as it should be) But when i enable SmoothScroller the refresh order is: 3 - 1 - 2. This messes up my triggers because 1 and 2 both have pinspacing. I've tried refreshing the timelines' scrolltrigger as mentioned here, but no success. I did manage to get it to work using refreshPriority:-1, but i don't think that's a fitting solution for me (because of the large amount of tweens/triggers/etc). So i was wondering if this is expected behavior or if i missed something or did something wrong or anything. Just trying to wrap my head around it. Any help would be highly appreciated! Cheers, Oscar

Hi there! So I'm creating a website with some basic text animations (to note, ScrollSmoother is also being used) and I've had some people comment that some pages are a bit laggy. I've assumed that's because most text has the animation in question applied, and their browser is struggling to keep up. So I've tried to implement an alternative that instead of using GSAP to animate these simple values, I'd do it with CSS and the toggleClass parameter for the ScrollTrigger. While I've got this mostly working, I am A. unsure how performant the alternative is going to be, and B. it doesn't work the way I'd particularly like it to. For example, the currently un-commented option in the CodePen uses the stagger parameter to add a slight delay to the children of the trigger. But the key factor is that the parent element is the trigger and all immediate children will animate sequentially. The CSS alternative, doesn't do this as each individual child is the trigger, in order to create the staggered effect. This however means that there are some points where the first element will animate in (e.g. the title, in my example) and there will be a blank space below (where the paragraph is, but hasn't animated in). Example below. This As opposed to I hope this makes sense. If anyone has any ideas or solutions as to what I could do to maintain the initial animation (GSAP) but without incurring any lag on different machines/devices that would be much appreciated! Thanks, Ben Elwood

Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0

Hi, Hoping that a genius in these forums can help me out. I've got a project which is using horizontal scrolling, scrollTrigger and smoothScroller. You can view it here: https://orconeau.com/cecilstreet/spaces/location/ The issue I'm having is that when the user scrolls towards the end of the horizontal scrolling section, it's adding a huge gap and not stopping on the last section with it centered. I've spent hours trying to tweak the math but I just can't get it to work properly and I'm pulling my hair out. Happy to set up a codepen but I wanted to see if anyone could have a look at the STAGING link and the code that I'm using and maybe make a suggestion. The CSS is: [data-component="horizontal-scroller"] { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; .cards { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; flex-shrink: 0; gap: 10vw; .card { width: auto; height: 100%; display: flex; align-items: center; flex-shrink: 0; justify-content: center; background-color: blue; backface-visibility: hidden; overflow: visible; padding-top: 101px; padding-bottom: 120px; box-sizing: border-box; .inner { height: 100%; position: relative; will-change: transform; transform-style: preserve-3d; } picture { img { @include app-breakpoint-3 { width: auto; height: 100%; } } } &:nth-of-type(odd) { background-color: purple; } } } } The javascript is: const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const smoother = ScrollSmoother.create({ smooth: 1.5, effects: true, smoothTouch: false }) const horizontalTween = gsap.to(horizontalCards, { x: () => { return -((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)) }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2))}`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector('.inner') gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }) const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }) ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, markers: true, animation: tween }); }); I've got the horizontalTween working and then I have an animation for each .card element inside the scrolling .cards section. The animation in there is doing some funky transforms and the issue is that the scrollWidth is including the transforms when it's determining the width of each card. I think. When I turn it off, the scrolling overflow is better but I lose the effect. Any help would be greatly appreciated. Thanks

Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks

Hi, I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger. I used a starting point from this great CodePen example: https://codepen.io/nicvh/pen/gOeZKOJ What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections. As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out. Thanks

Hello! Thank you very much for such an amazing library! I've been using locomotive scroll for some time to achieve smooth scroll, but I had occasional performance issues when I would use power save mode on my laptop. So I decided to become a club member and use scrollsmoother. After removing locomotive related code and updating JavaScript , website started to work perfectly on desktops, even on power save mode! But unfortunately on my phone and tablet performance dropped drastically and way worse than used to be. Address bar would show/hide sometimes despite setting normalize scroll to "true". After setting normalize scroll to "false", performance gets slightly better, but still very jumpy... I would provide codepen demo but I am not sure what causing this behavior on phone and tablet and which part to isolate and put in codepen. I really don't want to go back to using locomotive scroll, but it had better performance on mobile which doesn't make any sense. I am sure I am doing something wrong, but can't figure out what... I would appreciate any help and advice! this is demo https://gsap-test-smoothscroll.netlify.app/ this is javascript snippet I use // create the scrollSmoother before your scrollTriggers let scroller = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", normalizeScroll: true, ignoreMobileResize: true, smooth: 2.5, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.3, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) });

Hello, I am running modal box and menu in codepen. However, the scroll moves during this process, how can it be made active and passive? Can you do it on Codepen example, I tried a few times but I couldn't. Thank you in advance.

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!

Hi I want have many sections with 100 percent height and one of sections have many sections itself, Can i have multiple scrolltriggers with scrollsmoth???

I want to create a stagger effect using ScrollSmoother. I wrap individual letters of a word inside a span and then apply lag to each of them. This works well. But when I introduce an h1 tag as a wrapper for these spans, this no longer works. Any suggestions?

Hi! So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!) I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally. I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense? Hope someone can help! Thanks in advance, Ben Elwood