Search the Community
Showing results for tags 'smoothscroll'.
-
Hi all., Great day. When we're using the smooth scroll script the functionality is not working fine as we expected. As per your demo in codepen (https://codepen.io/GreenSock/pen/KKXZOyZ), we tried to include the height with a static value like (height: 9000px;) reference - https://prnt.sc/6K97ufrgm4CE . Shortvideos reference, https://recordit.co/hdjCQztnJM and https://recordit.co/3At0AA5qWD Unfortunately, we can't include the constant value here, the height will differ for each page. So, we tried to get the entire body height from the script. We haven't got any luck on this. Now, we are facing the height calculation methods only. So, anyone please help us to complete this without calculating the height? Thanks in advance
-
Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // 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 ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could 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!
-
I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.
-
Hello, I made a copy for the gsap animation in the sample codepen link. But it doesn't work like the effect example, it takes the styles but there seems to be a shifting problem. Can you help me? Example; https://codepen.io/GreenSock/pen/JjYPgdp My Pen;
-
Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support
-
Hi folks I am using trying to use this technique Animated horizontal scroll technique in m y project but when I am using it the normal page scroll stop smooth scrolling and page get disturbed. * in my code i just add 2 parent divs ( <div id="smooth-wrapper"> <div id="smooth-content"> ) and its code let smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1, smoothTouch: 0.1, effects: true }); After adding this the horizontal scroll get discrubed. Thanks in advance -
Hello, I want to close the content that I opened with the Menu button with the same button. I use scroll pause when opening the menu, but to cancel it "smoother.paused(false);" I have to use is there a method like toggleclass for this? Can you help me? The code i use; $(".hamburgerMenuOpen").click(function () { smoother.paused(true); $(".menu").addClass("visible"); }); //Hamburger Menu Close $(".hamburgerMenuClose").click(function () { smoother.paused(false); $(".menu").removeClass("visible"); });
-
Hello, I actually want to stop the scroll and parallax effects that are not normal effects on mobile devices. I used a code for this, but smoothscroll still works. can you help me? You can view the project here, thank you very much. http://clients.super-agency.com/test/dy/ I'm using the code below, it turns off the parallax, but the smooth scroll effect still works. I want browser default scrolll on mobile devices. console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); let smoother = ScrollSmoother.create({ wrapper: "#smoother-wrapper", content: "#smoother-content", smooth: 1, smoothTouch: 0.1, normalizeScroll: true, ignoreMobileResize: true, effects: ScrollTrigger.isTouch === 1 ? false : true, });
-
Hello, I was using parallax in my project but I am using code to turn this feature off for mobile devices. However, when I did this, the parallax visuals became normal as I wanted. But I can't pause body scroll with scrollsmoother in this way. For example, when I open the menu, the page scroll works. I have such a problem, how can I solve it? I share my project link with you; Example https://yeni.dybank.com.tr/ If you try this link on mobile, you will understand more easily what I mean. Thank you so much.
-
Hello, in the example i shared in codepen, I only want to disable the parallax effect on the mobile device, can you help with this?
-
Hello, I'm using modal or popup in my project, but when I scroll, the modal and popup are not right there on the page. Can you help me?
-
Hey, pls help me in a scenario like if I scroll fast then I miss the text and it jumps to the next section. It should always show the text and image swapping section should be in view when user scrolls again. I am sharing a demo here.
-
Hello, I'm using companets like this in my project, but the page can be scrolled up and down. I definitely want to lock the scroll, I just want it to return to normal when I turn it off. Can you help?
-
Hey there, This is not really an issue but rather a way of improving and writing more efficiently. I am trying to find the best way to animate a fixed header after scrolling passed a specific threshold (i.e. 100px from the top). I'm currently achieving this by toggling a class, which works fine, although I'd prefer to leverage GSAP to animate it than CSS. You can also see that this is coupled with an animation that plays/reverses depending on the scroll direction. Effectively I am aiming for: Scroll down (hide) Scroll up (show) Scroll past 100px from top, apply styling such as `background`, `backdropFilter` and `borderColor`. function fnHeader( oComp ) { let oHeader = document.querySelector( '.c-header' ); let oHeaderInline = oHeader.querySelector( '.c_inline' ); /** * Toggle class on threshold */ gsap.from( document, { scrollTrigger: { start: 'top -100', end: 99999, toggleClass: { className: 'has-scrolled', targets: oHeader } } }); /** * Animate on up/down scroll direction */ const showInline = gsap.from( oHeaderInline, { yPercent: -100, paused: true, delay: .1, duration: .8, ease: Quart.easeInOut }).progress( 1 ); ScrollTrigger.create({ start: 'top -80%', end: 99999, onUpdate: ( self ) => { self.direction === -1 ? showInline.play() : showInline.reverse() } }); } Would anyone advise on a better approach? Thank you!
-
Hello all , I'm on a new version of our site for the agency. We currently have this library in addition to GSAP, scrolltrigger etc: https://github.com/idiotWu/smooth-scrollbar I have a section on home where I pin using Scrolltrigger, except I get flickering when I scroll and I can't fix it. I read all the topics that were related to this problem (https://greensock.com/forums/topic/26008-scrolltrigger-flickering-when-pinned/) I can not understand where the problem comes from because I put the right thing. I made a video for you to see because the site is local : https://e-kosmo.com/problem-pin.mp4 pinType > fixed doesnt work pinType > 'transform' work with flickering ScrollTrigger.create({ trigger: this.$target, refreshPriority: 0, invalidateOnRefresh: true, pin: this.$wrapper, pinType: typeof window.SB !== 'undefined' ? 'transform' : 'fixed', //pinType: document.querySelector(".scroll-content").style.transform ? "transform" : "fixed", //pinType: 'fixed', pinSpacing: 'margin', anticipatePin: 1, scrub: 0.5, start: "bottom bottom", end: '+=2700', }); Thank you in advance for your help and feedback Nickolas
-
When you use smooth-scrollbar, React and GSAP ScrollTrigger in multiple React components all animations stop working. Firstly I thought it's Gatsby issue but the same thing happens for pure React. Everything works well if you don't use smooth-scrollbar, also everything works well when you use smooth-scrollbar and store all scrollTrigger animations in one useEffect. But when you move them to other components then all animations stop working. Try to use my codepen example. Animations don't work but when you comment out scrollTrigger object from the "Other" component then it starts to work. -
Hello..! I did setup locomotive scroll with GSAP for my Wordpress Site. Currently it is running beautifully..! But the problm is that, None of my Elementor Scroll Animations are working. I am pretty new to Wordpress and Web Development. If you can help me, it would be a great pleasure. (Iam using Astra theme + Elementor Pro. I created some scroll animations for couple of Elementor sections. Everything not working. And I add my page (#page) as the locomotive scroll element.) -
So I'm implementing a smooth scroll like this: useEffect(() => { const container = document.querySelector(".scroll-container"); document.body.style.height = container.scrollHeight + "px"; const onScroll = () => { gsap.timeline() .to(".scroll-container", { y: -pageYOffset, overwrite: "auto" }, 0) } document.addEventListener("scroll", onScroll) }, []) The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the container, won't be enough to scroll the whole container using smooth scroll. How do I calculate the height I need for smooth scroll?
-
I aam trying to achieve https://www.brewsandgrooves.com this kind of smoothness with cross browsing really need for my portfolio
-
Hi, I have a horizontal scroll using the Smooth-scrollbar library. I'm trying to do a simple rotation on a square by using GSAP ScrollTrigger's proxy but I can't get it to work. What am I missing out here ? As always thanks a lot for your help !
-
Hello BEST Team ever, first of All, Thank you very much for this amazing work on GSAP 3 . I have weird issue when I tried to implement smoothscrolling with scrolltrigger. I'm getting this error in the console and the scrolltrigger is failing to trigger any animation with scrolling I'm using this code to connect scrolltrigger with smooth-scrollbars import Scrollbar from 'smooth-scrollbar'; import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); export default () => { const scrollContainer = document.querySelector('[smooth-scroll-container]'); const bodyScrollBar = Scrollbar.init(scrollContainer, {damping: 0.075, delegateTo: window}); bodyScrollBar.track.xAxis.element.remove(); bodyScrollBar.setPosition(0, 0); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); bodyScrollBar.addListener(ScrollTrigger.update); } By the way smooth-scrollbar is working very well sorry for the lack of proper info as I don't know how to address this problem properly. Thanks in advance
-
Hello, I use a smooth-scrollbar within a project. I can run it with ScrollTrigger with scrollerProxy(). No problem. But it only works with scrub:true. I just can't use it to trigger it. I also used it with locomotive-scroll. The scrub problem is not there. (In codepen if you change scrub:true it will work) https://codepen.io/ozcancelik/pen/WNwJqRj Is this a scrollProxy bug? Or where am I doing wrong? Thank you. Ozcan
-
Hello devs , i'm trying to implement smooth scroll and scrollTrigger pinning on same view port. As the smooth scroll works by disabling scroll and translating -Y , pinned div also translates instead of pinning. Reference : https://codepen.io/wooooosky/pen/LQNZgv Can anyone give me a solution , would be helpful. Thanks in advance.
-
Hi there! I´m using the brand new Scroll Trigger plugin, it´s amazing! But i´m having a problem using it with Smooth scroll: i have a link that scroll the page to some point, but after this scroll the Scroll Trigger markers move and the animation that should be triggered doesn´t start. If not scrolled, the script works as it should. Here is the example with markers: https://byhumans.works/area/cliente/roalca/ The bottom blue section have a countdown ( gsap timeline ) that is triggered once with Scroll Trigger. Click on buttons after "Nuestros Productos" title and you will see how the blue section with numbers below lost the trigger start point. I have to do something else after i smooth scroll the page? if i use other script to scroll the page same thing happens. This happens in all browsers, in pc, ipad and smartphone. Thanks My js: // scroll on click category var prodCatBtn = util.$$('.prod-cat-link'); // scroll util.on(prodCatBtn, 'click', function(){ gsap.to(window, { duration: 0.35, delay: .35, scrollTo: { y: ".switcher-prod", offsetY: 140 }, ease: "power2.inOut" }); }); // top boxes animation var counter1 = { var: 1950 }; var counter2 = { var: 0 }; var counter3 = { var: 0 }; var count1 = util.$(".number-1"); var count2 = util.$(".number-2"); var count3 = util.$(".number-3"); count1.innerHTML = counter1.var; count2.innerHTML = counter2.var; count3.innerHTML = counter3.var; gsap.registerPlugin(ScrollTrigger); // counter animation var tl = gsap.timeline({ repeat: false, ease: "none" }); tl.to(counter1, { var: 2004, duration: 3, onUpdate: function () { count1.innerHTML = Math.ceil(counter1.var); }, }) .to(counter2, { var: 16, duration: 3, onUpdate: function () { count2.innerHTML = Math.ceil(counter2.var); }, }, "-=2") .to(counter3, { var: 160, duration: 3, onUpdate: function () { count3.innerHTML = Math.ceil(counter3.var); }, }, "-=2"); ScrollTrigger.create({ trigger: ".counter-wrap", animation: tl, toggleActions: "play pause resume pause", start: "top bottom", markers: true, });
.thumb.jpg.368c48a2a16d8297dd6b848180c23d8a.jpg)
