ferriss

Ha, yes, typo!

@akapowl Nice, scroll-proxy works really well, thanks!

Hey @ZachSaucier Great demo above, but it doesn't seem to fit the above examples. As such I've tried to recreate the above using your code but it's not having the same effect, is the drag resets the progress to zero. https://codepen.io/CHEWX/pen/eYvEzEd Be good to see if it's a simple fix. Thanks.

Thanks, I should've looked harder, I just assumed the scrollTrigger: {} within GSAP was redundant and you have to put it on the ScrollTrigger.

Ah, noted on the Media Query events. — Regards to the .matchMedia(), are you saying I can do it like this: ScrollTrigger.matchMedia({ "(min-width: 800px)": () => { gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }) } }); As this looks wrong to me, so my question is, do I need to re-code the opening posts setup to use .matchMedia(), without using scrollTrigger: {} within GSAP. or the other question was, is there a property to use within the animation. gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth, matchMedia: { "(min-width: 800px)": () => { // Do Something } } } })

From your docs: The above example isn't using that setup, so won't allow the use of .matchMedia() without re-coding to a standalone setup? Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing.

Perfect, that's sorted it. Thanks!

Hi, Is it possible to use matchMedia (which I assume if the only way to add responsive breakpoints) within gsap? Your docs mentions this is the most common setup, but I cannot see a property that allows using breakpoints using that setup, only by using the standalone version? I'm currently using the common setup like so: gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }) This is to do a horizontal scroll lock. On mobile I just want to stack, so the only way I can see to do this is re-code into a standalone setup and then use .matchMedia()? Or is there another nested property. Thanks

Hi, Hopefully this is simple question to not need a reproduction. I have a Header with scrollTrigger: ScrollTrigger.create({ trigger: '.l-header--sticky', start: 'top top', endTrigger: 'html', end: 'bottom bottom', pin: true, pinSpacing: false, markers: true, scrub: 1 }); Half way down the vertical page, I have a horizontal scrolling section: gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }); Now, this means the calculation for the header endTrigger is wrong as it's not taking into account the horizontal vertical scroll. Cannot see anything in the docs to refresh this calculation? Thanks.

Perfect, the new BETA fixed the issue.

Here I've made a reduced test case: https://codesandbox.io/s/white-microservice-pi1by If you click about, it works the first time, but then if click home and then back to the about page, only the first scrollTrigger reveals. The rest do not work.

I think the issue here is to do with the fact I'm using .batch() or more than 1 instance of ScrollTrigger. Yet there is only 1 ScrollTrigger.scrollerProxy in the example, it's not setup to work with multiple instances?

Hi, Using the attached codepen, I have this working fine. But when setup in a NuxtJS or equivalent environment with ajax route changes the ScrollTrigger.scrollProxy stops calling. I've tried ScrollTrigger.kill() on the destroyed() method of NuxtJS, but whenever I go back to the route with the setup, scrollTop() doesn't call within ScrollTrigger.scrollProxy. Thanks

I've now fixed this above.

Ah yes, that will fix it. I have child elements with width values based on various things. On a callback I call `ScrollTrigger.refresh()` each time a child width is updated, but that doesn't seem to update the speed.

Hi, I've using the above pen, however I have different lengths of content through-out the website. This causes the scroll to scroll horizontal really fast on longer content over short. Is there a way of keeping the scroll speed consistent regardless of content width? You can replicate this by using 3 child divs in the example and then changing this to 9, you will see a difference in speed. Thanks, Ferriss.

Hi, I have bound a function to scroll. When the page has quite a lot of videos on the page or a few lottie SVG animations, the scroll animation is a bit choppy and isn't smooth. On an empty page it seems to function ok, so this tells me it's not a wrong value in the code. Any thoughts or ways to debug the scroll optimisation? I've got a calculation that returns a percentage, with that percentage I then animate the height of an element. var el = new TimelineLite({ paused: true }); el.to( $('.el'), { ease: Power0.easeNone, height: 134 }) [...] var progress = perc * -1 + 1; el.progress( progress ); Where the [...] there are more calculations, but I do not think they are relevant here. You can see the progress being outputted in the console and this should smoothly animate? But the video shows when you scroll quick, it's jittery and if you scroll very slow it's ok. On pages with just plain text, you can scroll quick and it keeps up. Thanks Screen Recording 2020-09-24 at 07.29.32.mov