coderesolution

Hey all, I'm afraid we're also having the same issues. macOS, Android and Windows are all fine. However, on iOS (Safari, Firefox and Chrome) on various models and versions, we have the same jittering problem whilst scroll (quick preview video: https://cloud.coderesolution.com/ursjkV). We've been able to replicate it on physical devices and BrowserStack, though oddly not on LambdaTest. We're using GSAP v3.10.4. We would love to get help on this, thank you! UPDATE: Changing `smoothTouch` to `0` has fixed it. Since touch devices have native smooth scrolling, I don't think this is bad.

Hello, I have ScrollSmoother set up, which is working great. However, in some cases when I have the data-speed attribute (`data-speed="0.5"`) added to elements that are displayed at the very top of the page (i.e. a hero background image), it starts with an inline translation already, causing a gap at the top of the page. Video example: https://cln.sh/okKwoJ It does only appear on some pages and also depending on the viewport height. Happy to share links to the actual demo, but I cannot share login credentials publicly. Thank you and kindest regards, Elliott

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!

Thanks @PointC, this works a charm!

Hello, I have SmoothScroller enabled and working, however, in many cases the height of the page will change by content such accordions, tabs, carousels, etc. Is there a way to manually tell SmoothScroller to update/recalculate the page height, like it does on screen resize? I am looking for an equivalent to LocomotiveScroll's `update()` method (https://github.com/locomotivemtl/locomotive-scroll#instance-methods). I have been reading the docs (https://greensock.com/docs/v3/Plugins/ScrollSmoother) but haven't seen a solution listed. Thanks so much!

Hey @PointC and @GreenSock, updating my version to 3.10.0 solved the issue. Apologies for the oversight, and thank you for the support!

Hello, I am using ScrollSmoother, and the scroll behaviour, speed effect, etc. is all working fine. The issue arises when I use the lag effect, which results in the following error: vendors.js?ver=514311651744774:9 Uncaught TypeError: v.resetTo is not a function at Object.onUpdate (vendors.js?ver=514311651744774:9:4336) at Object.c [as onRefresh] (vendors.js?ver=514311651744774:9:3496) at vendors.js?ver=514311651744774:9:2381 at Array.forEach (<anonymous>) at T (vendors.js?ver=514311651744774:9:2169) at vendors.js?ver=514311651744774:9:25389 at Array.map (<anonymous>) at Dt (vendors.js?ver=514311651744774:9:25365) at Xt (vendors.js?ver=514311651744774:9:26025) I am registering the plugins, initializing smoother with effects set to true. /** * GSAP */ /* Register plugins */ gsap.registerPlugin( ScrollTrigger, ScrollSmoother ); /* Smooth scroll */ let smoother = ScrollSmoother.create( { wrapper: '[data-scroll-wrapper]', content: '[data-scroll-content]', effects: true } ); smoother.effects( '.box', { lag: ( i ) => i * 0.5 } ); However, the lag that is applied to the `.box` elements is what causes the error. I have also tried setting it within the DOM, which results in the same: <div class="box box1" data-lag="1.5"></div> <div class="box box2" data-lag="1"></div> <div class="box box3" data-lag="0.5"></div> Please can anybody advise? Thank you!