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

I've replaced the .kill() with .disable(). beforeDestroy() { ScrollTrigger.disable() } But Webpack complains stating ScrollTrigger.disable is not a function. ' Error details: TypeError: gsap_all__WEBPACK_IMPORTED_MODULE_2__.ScrollTrigger.disable is not a function '

Hi again. I'm having an issue I can't seem to go around... In Nuxt, I'm using ScrollTrigger.create to pin to specified panels on a index.vue page. All is fine. When navigating to other pages (with or without ScrollTriger animations), the new page is still running the ScrollTrigger, thus pinning to the index.vue instructions, even though its a totally diferent page. My initial thought was to do 'ScrollTrigger.kill()' on the lifecycle 'beforeDestroy()', which works... until I come back to the index page to see there's no animation anymore... I can't do it in codepen (don't know how to do Nuxt there), but I've prepared a codesandbox.io. https://codesandbox.io/s/unruffled-antonelli-dl8fw In summary: If I don't do ScrollTrigger.kill(), the next pages still run to the current ScrollTrigger animation (next pages become unusable) If I do ScrollTrigger.kill() when the current page is destroyed, the next pages are correct. But when navigating again to the initial one, there's no more animation. Any ideas?

This is amazing! Simple and brilliant! Great work.

Of course Thanks again

Thank you so much for both your answers. @OSUblake, so there is no way to isolate ScrollTrigger animations? As each <panel> is an independent component, it will be hard to control them from the outside. The hard coupling is something I'm trying to avoid, as the components will be reused in other pages. @ZachSaucier, thank you too. My project is getting large. If I can't find what is getting in conflict I'll create a sandbox (codepen won't do for Nuxt) and post it here. Thank you again for your assistance.

Sorry for the noob question here, but I can't seem find it anywhere, so here goes. My nuxt.js index page has several 'panel' components. Each one is full page, and are animated like on this codepen. https://codepen.io/urbgimtam/pen/XWXdypQ Because I'm working with Nuxt, on the main page (responsible for animating the 'panels') I'm using something like: <template> <div> <panel :content="content_a" /> <panel :content="content_b" /> <panel :content="content_c" /> </div> </template> <script> import { gsap, ScrollTrigger } from 'gsap/all' import panel from '[path/to/component]' export default { components: { panel }, data() { return { tl = gsap.timeline() } }, mounted() { gsap.registerPlugin(ScrollTrigger) [... animations defined here ] }, methods: { playAnim() { this.tl.play(0) } } } </script> However, inside each <panel>, I also want to have independent animations. If inside a <panel> component I have again <script> import {gsap, ScrollTrigger} from 'gsap/all export default { data() { panelTimeline: gsap.timeline() }, mounted() { gsap.registerPlugin(ScrollTrigger) [... animations defined here] }, methods: { playAnim() { this.panelTimeline.play(0) } } } </script> is the panelTimeline refering to the same timeline as the parent? I seem to have some interference somewhere in my project and I'm wondering if the parent component ends up sharing the same timeline as the children. I'm using ScrollTrigger on the index (which is the parent of all the panel components), and I've read on the Docs that it uses one single timeline. If so, what should be the best way to make sure to have independent timelines? Big thank you in advance. PS: On gsap v.2, we would do tl: new Timeline() and that would work (and there was no ScrollTrigger )

You are the best Super!

Thank you! I've updated the codepen with the new version and now works perfectly. ? is there a way to download a module version of this beta? Or is there an ETA for this version?

I think I've found a similar issue, or at least, what seems to be a nasty bug on my setup. As a test, I'm using my own codepen. https://codepen.io/urbgimtam/full/QWyNeXb If the system resolution is unchanged (100% resolution), the above codepen works. However, if the system resolution is changed (for instance, 125% resolution - common for people with large/hires screens like mine) the pinning breaks completely. Even if the browser is refreshed, closed and reopened. Even after rebooting the machine already at 125%, the behavior was the same. Also, even at 100%, if the browser's zoom is not 100%, it also stops working. Both Firefox and Chrome displayed the same issues. Anyone has seen this behaviour? Could this be from my code? Should I report this? PS: I was actually losing my hair why it wasn't working in my main screen, and when moved to a smaller screen (with 100% resolution), noticed that it actually worked as it should. This may be a somewhat big problem - you never know if your visitor has a hires screen...

I'm also trying ScrollTrigger and can't seem to snap vertically (and I'm still kind of green with GSAP). If I understand correctly, we should use the onEnter and onLeave events to trigger a ScrollTo animation, so it moves to the correct panel? (in your reply's Codepen, the animation has some faults sometimes, either the scroll stops responding or the animation is triggered back to start when moving backwards ).