Fabian W

Hi, I have a probably simple questions, but my brain is just blocked at the moment, and cannot find anything in the forum / docs? A simple fromTo() loop gsap.fromTo(el, { x: '-25%' }, { x: '-75%', ease: 'linear', repeat: -1, duration: 12 }) And at a click I want to quickly animate to -35.25% seemlessly (and continue scrolling afterwards) How would I do that?

Thanks, that would be great. I just dm'ed you.

I am curious. What did you change to make it work?

Thank you! Fantastic, this seems to fix the issue. I will await the production release then. When are you guys going to publish it? Cheers, F

I also tried in on different Browsers and it seems to work on Firefox. Chrome and Safari are having the behavior. Which browser are you using? Also, do you have the debug console open and cache deactivated? autoResize: false seems to work. BUT now I have to build a resize -> refresh system for the whole website (e.g. we have accordions) an option to have a threshold for when the refresh happens would be great. is that possible?

Is there a NPM way to do it?

Maybe it does not show up on your screen. I made a little video where you can see the blue box jumping after a layout shift. https://www.dropbox.com/s/dm2ebo622ucs93m/230130--Kapture 2023-01-30 at 09.34.57.mp4?dl=0 Yes, i would like to skip the refresh() if the layout shift is only x% of the viewport. Regarding autoResize: Can you point me to the docs? I cannot find it there...

Sorry, yes it was not well written. I updated the original post with a new demo and a more precise formulation. Let me know if it's still hard to understand.

Hi, We would need an option to ignoreMobileResize also for non-touch devices. Is this possible? Reproduction: The demo simulates a the combination of SmoothScroller, ScrollTrigger and lazy loaded images. The only purpose of the onLeave method is to load the image while a scrub is taking place, it's not part of the actual problem. When scrolling down one can see the blue box animating -200px on y-Axis with a ScrollTrigger and scrub. This blue box is jumping to the beginning of the animation the moment the image is loaded. A lazy loading image may be a layout shift if the height and width of the image tag is not matching the actual size. This can happen if some odd formats like 16:9 get rounded. The difference is mostly between 1 and 2 px. But these 1-2px still are a layout shift and force the SmoothScroller to do a refresh(). A refresh() then forces the scrub animation of a ScrollTrigger to reset. This causes the element to jump. On mobile we have the ignoreMobileResize config. We would need something like this for desktop. So if these little layout shifts happen the SmoothScroller does not refresh(). Best, F

Hi again, we are dynamically loading the content now. NestedScroll is not working anymore, is it only for content present on the initiation of SmoothScroller? How to let it recalculate the allowNestedScroll? Edit: on my reproduction with CodePen it works. Are there any caveats with AllowNestedScroll? I cannot find it in the docs. https://codepen.io/anothercodepen/pen/dyjemxY Best, F

Hi guys, super simpel questions, the other Forum Threads are a bit too complex for my use case. How to make an element sticky with ScrollSmoother? I do want to have /mimic the same effect: The element pins to a top value as long as it is within it's parent element. Would be great if you could help me out what to do. Thanks, F

I updated the topic with a reporduction. Here is the pen again. https://codepen.io/anothercodepen/pen/poZPxvm It's not possible to scroll the right <aside>.

Hi guys, We have a regular ScrollSmoother on the website. Now we open up a scrollable fixed element ontop. How to prevent the main page from scrolling while the fixed element is open? It seems that the scrollable elements scroll is not honored because ScrollSmoother takes over. How to achieve a second regular scroll element while ScrollSmoother is on? Thanks!

Hi Rodrigo, That seems to work, thanks. Unfortunately I ran into another issue: Is it possible to tween between the old y value and the new y value? Because invalidate() lets the elements jump to their new position. (Or should I open another topic for this?) https://codepen.io/anothercodepen/pen/VwdVJOa Cheers, F

Hi guys, We have two divs with a different height which lay next to each other. If the user scrolls gsap scrolltrigger scrolls the divs in a way that on the bottom of the page (scroll end) they are aligned at their bottom line. This works easy if we calculate the leftover space to scroll with body height - div height. If one of the divs holds an expandable element the height of the div changes dynamically. Is it possible to refresh not only the start and end scrolltrigger values, but also the y value of the to tween? All the best, F