Search the Community
Showing results for tags 'scrollsmoother'.
Found 72 results
-
I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.
-
I've got a bit of an odd issue, but I'm fully aware it's not a GSAP issue, so aren't looking for help with another library, hopefully just a push in the right direction? I've got a site setup using Scrollsmoother and SWUP for page transitions, and am killing SS and reinitializing it on each page transition. The odd issue I have is after visting other pages, the scroll speed seems to get quicker and quicker. Any idea what might be causing this? I had wondered if it was down to assets not loading in prior to SS init, but the height of a page is the same on a window refresh, as it is on a transition. Initially, I just captured this on video to help show the issue firsthand, as I'm hoping that might be enough to point me in the right direction. https://streamable.com/b5h22y For a direct comparison, the first page scroll on the video is normal, and the same page a few page transitions later at 00:43. (same mouse scrolling) Thanks in advance, and apologies for not having a minimal demo at this stage
-
Hello, I added simplebar js to my ongoing project to customize the scrollbar, but there is a conflict. I think the styles come when gsap is disabled, but the simplebar styles do not work when gsap is active. Can you help me?
-
Hello! I have searched extensively and for a very long time, but unfortunately have not found a similar problem or solution. Unfortunately I cannot present a "normal" minimal demo, but I have created two codepens to illustrate the problem. I apply smoothscrolling between two div's: wrapper and web. #wrapper, #web{ width: 100% !important; overflow: hidden; } This is the js-code ScrollSmoother.create({ wrapper: '#wrapper', content: '#web', smooth: 1.5, effects: true }); In HTML I sometimes use data-speed="0.7" If you would please access this pen https://codepen.io/design4u-koeln/pen/wvYrGxd full: https://codepen.io/design4u-koeln/full/wvYrGxd with a mobile device (android / chrome in my case) and scroll up and down a bit, the browser hangs! If I forbid smoothscrolling for mobile, this does not happen. https://codepen.io/design4u-koeln/pen/xxyXOaO full: https://codepen.io/design4u-koeln/full/wvYrGxd let mm = gsap.matchMedia(); mm.add("(min-width: 576px)", () => { ScrollSmoother.create({ wrapper: '#wrapper', content: '#web', smooth: 1.5, effects: true }); }) Maybe someone recognises the " known pattern", why this is happening? Thank you very much!
-
Hello, Smoothscroller and Smooth Scrollbar version but I couldn't get the Smoothscroller feature to work. I think there is a point where they overlap. Can you help?
-
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? -
Hello lovely people, I am quite new to GSAP so excuse me if the question is kinda silly. I have the following problem. I am using SvelteKit for my current assignment. I decided to add ScrollSmoother to the pages (because its freaking amazing). In order to avoid adding it to the layout of every possible route, I used it in the main layout component, so every page is affected by it. So far so good, everything works fine, but as expected in the pages that I have a fixed position of an element it is all messed up. I have went through the docs, and I know that fixed elements must be placed outside the smooth-wrapper, but with the current setup thats not possible. So here is the question. Is there a way to mimic the same effect of a fixed image as a background with something like a pin. Or do I have to find a way to call ScrollSmoother for every single route differently, even though this will cause unneeded redundency. Here is what I want to achieve, but with ScrollSmoother. desired-result.mp4 But as you might expect, this is what I get when ScrollSmoother is enabled. current-problem.mp4 I would greatly appreciate your advice! Thanks in advance.
-
Hi, I'm trying to implement a custom cursor I made a while ago with scrollsmoother. I'm having trouble making the cursor appear between the background and the text. Everything works great if I remove the z-index in the cursor and scrollsmoother. Am I missing something? Thanks in advance.
-
Hello, I want to make the scrollbar special in the body by installing the Smooth Scrollbar plugin in the gsap project, but when I add it to the project, nothing appears in the body and the scroll does not work. Can you help me? I tried to do like in the example but it didn't work https://bayviewholidayapartments.com/ https://theresmoretolife.co.uk/
-
Hey guys, I'm pretty new to GSAP as a whole, so I apologise if I'm missing something obvious! I've been reading the forums and documentation over the past weeks and some of the solutions worked great for some of the issues I found myself into, so thanks for that! I'm trying to achieve the normal behaviour of a position: sticky; element, while enjoying the awesome ScrollSmoother Plugin. I somewhat achieved what I was going after, but the way I did it feels kinda wrong, so I'm guessing if there is a better way to achieve the same result. Please, take a look at the start and end values, pinSpacing doesn't seem to make a difference in this example. Thanks in advance ツ ScrollTrigger.create({ markers: true, trigger: stickyTrack[i], pin: stickyEl[i], start: () => `-=${gsap.getProperty(":root", "--siteHeader-height")}`, end: () => `+=${stickyTrack[i].offsetHeight - stickyEl[i].offsetHeight}`, pinSpacing: false });
-
Hello, I am making a project with gsap. Everything works very well, but when the content comes from the bottom to the top or when the content is independent from each other, a flickering line occurs, I searched, but I could not solve it, can you help? I am sharing the photo with you. Error image https://freeimage.host/i/screenshot-2023-04-05-005609.HOYGZMb
-
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`
-
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
-
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. 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!
