Search the Community
Showing results for tags 'scrollsmoother'.
-
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!
-
scrolltrigger Dynamic ScrollTrigger with pin inside a ScrollSmoother
Ivan Dudinov posted a topic in GSAP
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- 9 replies
-
- 7
-
-
- scrollsmoother
- scrolltrigger
- (and 1 more)
-
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
-
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. 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, I'm trying to display a modal that scrolls horizontally when loaded. I took my inspiration from this pen : https://codepen.io/GreenSock/pen/wvxoGeG It works perfectly when ScrollSmoother is not involved, but as soon as I uncomment the lines (5 to 11) that enable ScrollSmoother, it doesn't work anymore and I don't have a clue about the reason why. It seems that my ScrollTrigger is now related to the ScrollSmoother instance and I don't want that. Is there a method to detach my ScrollTrigger instance from the ScrollSmoother one? Any guidance is much appreciated.
-
Hi i'am a beginner new to GSAP, i'want to ask about the difference between package gsap and gsap-trial. so I'm now trying to create a portfolio website using NextJS-12 and want to add an animation on the scroll and try to use the ScrollSmoother library, when using gsap from npm I try to import "ScrollSmoother" from "gsap/dist/ScrollSmoother" but get an error that module not found, then I searched articles and some ScrollSmoother gsap projects for examples and found gsap-trial. when I try to import ScrollSmoother from the above path I don't get any error and the website works according to good results... but when I open the console in my browser I get a warning like the image below, can someone explain to me how to get the ScrollSmoother library it can be used on my website because as far as I know gsap-trial is running but if you see a warning from the image below it only runs locally and only certain domains... thank you
-
Hi, I'm having trouble getting GSAP ScrollSmoother to init properly on a simple single page barebones Next.js application. I have successfully imported the GSAP core and the ScrollSmoother into the index.tsx file as I've managed to log both in the console. This is what I have in my index.tsx file: import React, { useLayoutEffect, useRef } from 'react'; import { gsap } from "gsap" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import styles from '@/styles/home.module.scss' if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollSmoother); } export default function Home() { const main = useRef(); const smoother = useRef(); useLayoutEffect(() => { const ctx = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 1, effects: true }); }, main); return () => ctx.revert(); }, []); return ( <> <main id="scroll-wrapper" ref={main}> <div className='scroll-content'> </div> </main> </> ) } I've attached a screenshot of the error message that is populating in the browser. I have spent significant time and multiple different methods of trying to get this to work properly and am having no luck so I'd thought I'd reach out to the experts in this forum. Any help would be greatly appreciated. Thanks, Dayne
-
Hello, I have 3 or more content and at a certain point I can make a sticky menu, but how do I make these links slide to the linked id content and I need to add an active class to the active ul li a. And when it comes to sticky menu footer, I want to hide my sitcky menu, like fadeout, when I go up from the footer again, I want to bring the menu back. Can you assist?
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
