Search the Community
Showing results for tags 'smoothscroll'.
-
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, });
-
I'm currently working on a project I want to use smooth scroll for. To do so I decided to use @OSUblake's codepen. Since I want a horizontal scroll, I changed the direction from: TweenLite.set(this.scroller.target, { y: -this.scroller.y }); to: TweenLite.set(this.scroller.target, { x: -this.scroller.x }); ..and set the body's height according to the scroll-container's width, not height. - It kind of works, but it seems, that this.scroller.x (originally this.scroller.y) and the container's width don't match, since it "overscrolls". How so and is there a way to implement it correctly? I created a link to additionally visualize the issue: https://vibeitin.firebaseapp.com/
-
I'm currently trying to implement a smooth scroll just like @OSUblake's smooth scroll. https://codepen.io/magiix/pen/MWwbmMV As for my content I solely have some images and some text. These images and texts are being fetched asynchronously, as soon as the data is set I try to resize the body to make the smooth scroll work for all of its content: doResize() { this.scroller.scrollRequest++; this.requestId = null; this.scroller.resizeRequest = 1; this.requestId = requestAnimationFrame(this.updateScroller.bind(this)); } This works fine. But somehow the text is still causing some minor height problems, not much but there's still some inset not showing all of the body's content - not always, but moste of the times. Removing the text solves the problem, but that's obviously not an option. My text component: <div class="row m-0"> <div class="col p-0"> <h1 class="title-container"> {{title}} </h1> </div> <div class="col p-0"> <p>{{text}}</p> </div> </div> Removing p solves the problem. Calling doResize() after a few second does also help, but I want it to have the correct height from the very start. BTW changing p's line height etc. does also affect the inset's size hiding some content. Any suggestion how to prevent this from happening? EDIT: After removing the custom font, everything works as well - how so?
-
Hello, I went through greensock forum to find solution for smooth scrolling, and it was mostly Blake's codepen solution which pretty much worked as I want, however I was wondering would they work with scrollmagic? What exactly I mean is, I want to trigger gsap animations on element when they scroll into view, and for this I use scrollmagic. I was wondering if there will be problem with this since I read somewhere that this is just transform (which I saw with inspect element), and since it's not "real scroll" scrollmagic wont read it and trigger it when it should? This are Blake's codepens with smooth scrolling: https://codepen.io/osublake/pen/QqPqbN https://codepen.io/osublake/pen/ee9e27534440ef6ee1c2e2fdfd6c7e68 Thanks in advance
-
Hello, I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that. I don't want a smooth scroll when the user clicks on part1 or part2. <div class="tabs"> <ul class="tab_click"> <li class="current"><a href="#part1" >Part1</a></li> <li><a href="#part2">part2</a></li> </ul> </div> I need a smoth scroll when user click on the below anchor tag. <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Would you help me out in this issue?
.thumb.jpg.368c48a2a16d8297dd6b848180c23d8a.jpg)
