BMateus

Hi @ZachSaucier and thanks for your help. Duh! Of course, makes total sense, after your input! I've changed it to the code below. const asScrollInstance = this.asScrollInstance ScrollTrigger.scrollerProxy( '.innerscroller', { id: 'SmoothScrollMixin', scrollTop(value) { return arguments.length ? asScrollInstance.scrollTo(value) : -asScrollInstance.smoothScrollPos }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight } } } ) Still having issues with it, though, as it seems the mounting and destruction are not really working properly. As I navigate through pages, the performance is getting worse and worse, until AsScroll stops working completely. But ScrollTrigger still works, at least, so its something surely unrelated to GSAP Just for reference if someone reads this, the performance issue is also solved. I was creating new instances (new AsScroll(options)) in every call of the startSmoothScroll() method. Placing it before, outside the method, is the correct thing to do, as you only need it once. Then the startSmoothScroll() method just enables and disables it as needed. Thank you again for your help, @ZachSaucier! Was really stuck until you input :) GSAP rocks!

Hi everyone. I'm having some struggles with nuxt and ScrollTrigger.scrollerProxy also. I'm using ASScroll (https://github.com/ashthornton/asscroll) as a mixin (also tried as a plugin, no luck), and I need to enable ASSCrolll on mount() and disable the same instance on beforeDestroy(). So, I've done two methods, one 'startSmoothScroll()' to start and another 'destroySmoothScroll()' that are called on the mount() and beforeDestroy() of the respective pages I need. However, I always get an error: Cannot read property 'smoothScrollPos' of undefined at ScrollTrigger.scrollTop [as scroll] (smoothScrollGsapMixin.js?ee2c:59) at _updateAll (ScrollTrigger.js?1dac:448) It seems that, inside ScrollTrigger.scrollerProxy() scrollTop(value) I cannot use this.asScrollInstance.smoothScrollPos, although is should be the same instance. If I do something like const asscrollSmoothScrollPos = this.asScrollInstance.smoothScrollPos, and then replace it inside ScrollTrigger.scrollerProxy , the error is gone, but then ScrollTrigger stops working after the first page load. If instead of this.asScrollInstance = new AsScroll(asscrollOptions) I use a direct variable like const asScrollInstance = new AsScroll(asscrollOptions) and replace the code with it, all works fine, but then I can't destroy the asScrollInstance that was created... So I'm kind of stuck in a loop? Here's the code I'm using. Any help would be appreciated, as I'm struggling with this for some days already. methods: { startSmoothScroll() { // Register ScrollTrigger gsap.registerPlugin(ScrollTrigger) // Define options for AsScroll const asscrollOptions = { // disableRaf: true, // ease: 0.075 // default // customScrollbar: true } // Initialize AsScroll instance this.asScrollInstance = new AsScroll(asscrollOptions) // ScrollTrigger Defaults ScrollTrigger.defaults({ scroller: '.innerscroller', markers: true }) // each time asScroll updates, tell ScrollTrigger to update too (sync positioning) this.asScrollInstance.on('scroll', ScrollTrigger.update) // Define ScrollTrigger scrollerProxy, to delegate the position of scrolling to AsScroll ScrollTrigger.scrollerProxy( '.innerscroller', { id: 'SmoothScrollMixin', scrollTop(value) { return arguments.length ? this.asScrollInstance.scrollTo(value) : -(this.asScrollInstance.smoothScrollPos) // ««« THE ERROR HAPPENS HERE }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight } } } ) this.asScrollInstance.on('raf', ScrollTrigger.update) ScrollTrigger.addEventListener('refresh', () => { console.log('ScrollTrigger Refresh event. Starting asScroll.onResize'); this.asScrollInstance.onResize() }) console.log('ScrollTrigger.refresh() '); ScrollTrigger.refresh() this.asScrollInstance.enable( false, true, document.querySelector('.innerscroller') ); console.log('asScrollinstance enabled'); ScrollTrigger.refresh() }, destroySmoothScroll() { if (this.asScrollInstance) { console.log('asScrollinstance destroyed'); this.asScrollInstance.disable(); } } }

Wonderful! Works perfectly. I've updated my code. https://codesandbox.io/s/mouse-follow-pointer-in-nuxt-gsap-v3-khfgf?file=/layouts/default.vue I don't get tired of saying that you guys ARE amazing. Thank you again.

Oh, I see! Didn't knew about .quickSetter(). 🤦‍♂️ Makes total sense, of course. Thank you so much for the info. I'll test it out right away.

Hello again. I've tried to use the code by @OSUblake (I'm not just copying, it's really straightforward and perfectly understandable) in Nuxtjs, but the behaviour is really strange, as the circle moves extremely slowly and jerky. I'm using GSAP v3, but the code should work. I can't do a codepen for nuxt, but here's a minimal codesandbox. https://codesandbox.io/s/mouse-follow-pointer-in-nuxt-gsap-v3-khfgf?file=/layouts/default.vue The code is inside layouts/default.vue. Any guess why the strange behaviour?

It opens many new ideas Brilliant, I say! Thank you again for the amazing help.

We can add new properties to the vars? (my mouth is open in awe) Damn, you're good! Brilliant. (I knew my idea was rubbish )

Thank you again. .getAll() wouldn't work for my (real) case, as I'm using other anims for menus and stuff. What if (stupid suggestion comming), besides a ScrollTrigger.id, we could have a ScrollTrigger.collection? Just for these kind of noobs like me that loop through (which actually looks like a regular use case), and wouldn't have to deal with manually churning the id. It could be an array, and that would made it easier to plug into? (its probably a dumb idea..., but you never know) Thanks again for the precious help. You rock.

Thanks for the amazing help. You are always on the spot. Thanks again.

Oh, if I do mounted() { gsap.registerPlugin(ScrollTrigger); this.mainAnimation = gsap.timeline(); console.log(this.$refs.panel); gsap.utils .toArray([this.$refs.paneltop, this.$refs.panel]) .forEach((eachpanel, i) => { console.log("This is panel: ", eachpanel); ScrollTrigger.create({ id: "indexPannels" + i, trigger: eachpanel, markers: true, start: "top top", pin: false, pinSpacing: false, // scrub: 1, snap: { snapTo: 1, duration: { min: 0.4, max: 0.8 }, delay: 0.15, anticipatePin: 0.4 } }); }); ScrollTrigger.getById("indexPannels0").enable(); ScrollTrigger.getById("indexPannels1").enable(); ScrollTrigger.getById("indexPannels2").enable(); ScrollTrigger.getById("indexPannels3").enable(); }, beforeDestroy() { console.log(ScrollTrigger.getById("indexPannels0")); console.log(ScrollTrigger.getById("indexPannels1")); console.log(ScrollTrigger.getById("indexPannels2")); console.log(ScrollTrigger.getById("indexPannels3")); ScrollTrigger.getById("indexPannels0").disable(); ScrollTrigger.getById("indexPannels1").disable(); ScrollTrigger.getById("indexPannels2").disable(); ScrollTrigger.getById("indexPannels3").disable(); } I can see the console log of each instance. So it seems i was overwritting the id. It now works. I just need to make a function to make an array of scrolltrigger id's, so I can enable and disable them. This is because my 'panels' are dynamic, I never know how many there are. UPDATE: Confirmed to be working

Ok, managed to get rid of the errors. No, still returns Cannot read property 'disable' of undefined mounted() { gsap.registerPlugin(ScrollTrigger); this.mainAnimation = gsap.timeline(); console.log(this.$refs.panel); gsap.utils .toArray([this.$refs.paneltop, this.$refs.panel]) .forEach((eachpanel, i) => { console.log("This is panel: ", eachpanel); ScrollTrigger.create({ id: "indexPannels", trigger: eachpanel, markers: true, start: "top top", pin: false, pinSpacing: false, // scrub: 1, snap: { snapTo: 1, duration: { min: 0.4, max: 0.8 }, delay: 0.15, anticipatePin: 0.4 } }); }); ScrollTrigger.getById("indexPannels").enable(); }, beforeDestroy() { // console.log(ScrollTrigger.getById("indexPannels")); ScrollTrigger.getById("indexPannels").disable(); } However, Scrolltrigger is not getting disabled on the next pages. Seems its not disabling.

Could this be because of the loop, all with the same id? Also, ScrollTrigger.getById("indexPannels").enable() gives the same error: Cannot read property 'enable' of undefined

So, using : mounted() { gsap.registerPlugin(ScrollTrigger); this.mainAnimation = gsap.timeline(); ScrollTrigger.enable(); console.log(this.$refs.panel); gsap.utils .toArray([this.$refs.paneltop, this.$refs.panel]) .forEach((eachpanel, i) => { console.log("This is panel: ", eachpanel); ScrollTrigger.create({ id: "indexPannels", trigger: eachpanel, markers: true, start: "top top", pin: false, pinSpacing: false, // scrub: 1, snap: { snapTo: 1, duration: { min: 0.4, max: 0.8 }, delay: 0.15, anticipatePin: 0.4 } }); }); }, beforeDestroy() { ScrollTrigger.getById("indexPannels").disable(); } Gives me back: Error details: TypeError: Cannot read property 'disable' of undefined

🤦‍♂️ Makes total sense. I'm still green with GreenSock Sure, was testing it in real code. Let me update the codesandbox

I've also tried to add an id to the ScrollTrigger, and then calling ScrollTrigger.getById('theid').disable() but I'm getting the same. Using gsap 3.4.1