JayLow

Hi Sorry for the late response. Thanks for the explanation (and apologies for not being able to get you a demo). Maybe something in Nuxt is causing things to go out of order? It's odd because the jump happens after the page url has changed. This is the part of code I commented out in ScrollTrigger.js that fixed the issue. It hasnt seemed to have caused issues anywhere else, so I suppose I'll leave it for the time being. sc: function sc(value) { return arguments.length ? /*_win.scrollTo(_horizontal.sc(), value)*/ '' : _win.pageYOffset || _doc[_scrollTop] || _docEl[_scrollTop] || _body[_scrollTop] || 0; } and sc: function sc(value) { return arguments.length ? /*_win.scrollTo(value, _vertical.sc())*/ '' : _win.pageXOffset || _doc[_scrollLeft] || _docEl[_scrollLeft] || _body[_scrollLeft] || 0; } Also no smooth scroll behavior or jquery for me.

@OSUblake @GreenSock @Cassie Been digging into this more lately. I setup a listener to see when the window.scrollTo() is invoked to see precisely what is happening. My Vue instance is scrolling to (0,0) as intended on a route change. When the route changes, the new ScrollTrigger instances are created as expected. However, all of these new instances immedietely call the window.scrollTo method, which shoots the page downward to a much lower position (in this case 0 , 9408). So the default vue scroll to top is being overriden by scrolltrigger scrolling way down when a new class is setup. I commented out the ability for scrolltrigger to call window.scrollTo in its source file. This has solved the issue temporarily, but is obviously not the best way haha. What is attached to Scrolltrigger that would cause it to invoke window.scrollTo when a new class is created?

Hello, Lately I've been facing an issue which has been very hard for me to debug. I've been using Nuxt to build a static site and scrolltrigger for some of the animations. When changing routes, I face an issue of some reused components not having the right top/bottom trigger amount, and the site keeping its scroll position on a route change when it should go back to the top . Resizing fixes the first issue, but I cannot solve the second. I've noticed many cases of similar occuring on similar frameworks Anyways, I wanted to see if this is a known issue with the framework or GSAP? All my components kill their scrolltrigger instance on a route change, so garbage cleanup is fine. I've tried downgrading nuxt to no evail either, but it doesn't seem like a nuxt problem because it looks to be happening regardless of framework? The only thing that works for the wrong trigger amount is calling scrolltrigger.refresh() after an arbitary amount of time, but thats not really a fix. Anyways just look for any advice on what from those who have faced similar or to see if the issue is known.

I am using nuxt

Apologies, I tried making a code sandbox demo. I structured it very similarly to my project, and works the right way on the sandbox, I'll have to look more into it

No it does not work for me, selector utility comes back empty

@OSUblake After a lot of testing, I think I got it working reliably. In cases where the child components mounted before the parent, the selector utility worked fine. However, I had cases where the opposite occured, and the mounted of the parent ran before any of the children, which led to nothing returning with the selector utility. I couldnt get $nextTick working reliably either. I had some cases where it worked fine, others where children were still rendering by the time it rain. What I ended up doing, was create a timeline on the parent component in its created() hook, and have each child pass up its tween in an $emit listener, which adds it to the parent timeline and kills the childs scrolltrigger. That way, children can work by themselves or be merged with a parent if its available. The parent sets up a scrolltrigger on its mounted() hook because thats when the DOM is available Example of child: props: { text: { type:String, required:true } }, mounted() { console.log('child mount') this.animation = split(this.$refs.text) this.$emit('child', this.animation) }, data() { return { animation:{} } }, Example of parent: export default { data() { return { timeline: null, childElements:[] }; }, methods: { fillTimeline(el) { this.timeline.add(el.progress(0).pause(0).delay(0).play(0), '<+=.3') }, addchild(anim) { anim.trigger.kill() anim.animation.pause(0) this.fillTimeline(anim.animation) } }, created() { this.timeline = timelineInit(); }, mounted() { timelineTrigger(this.$refs.trigger, this.timeline) }

@OSUblake Selector utility looks promising. Docs say React and Angular refs though. Is it setup to work with Vue? I've believe I've tried the second option, but I've had cases where it will try to access the ref before it is defined. I might try an emit where the child passes its animation up on mounted. Will investigate more though. Thanks for the help

Hi All, Looking for some advice on this. First, here is a codesandbox link that is a minimal demo of my issue. https://codesandbox.io/s/sad-dirac-p04pv?file=/src/components/textSpan.vue Let me try to explain. The textSanitizer component serves as a serializer for a WYSIWYG from a CMS. Every type of text has its own respective component to render that type of text (heading, paragraph, textSpan, etc). These each have their own unique animations, which I call using refs in the mounted hook. What I would like to accomplish, is have all of these linked together to stagger on one scroll trigger, as opposed to each having its own. That way when someone scrolls to a text block, they cant solely trigger the first element without triggering the rest. I was thinking this would involve setting up a timeline on the textSanitizer component, and having each child append itself once it renders? Not sure if this is the right path, but just an idea

Hi all, I make static sites for clients using Nuxt and GSAP and wanted to get others opinions who do similar. When it comes to setting up GSAP, I previously did all the logic in the mounted() part of each component that used animation. I had my animation functions in a separate utility file and would pass refs in. However this quickly became tedious as every component would be slightly different, and sometimes the hydration process of vue would lead to some refs being undefined, even once mounted. Now, I'm testing more so using a normal js file that runs after rendering is done and uses css classes to find elements (akin to how it would be done in vanilla js with no frameworks). I much prefer this method as it makes everything take place in one file, and I can give certain elements classes if I want them to animate rather than manually calling functions and passing refs in on a per component basis. Is this considered a bad practice? Wanted to get insight from those in similar positions. I take a lot of inspiration from sites you would see on the awwwards, so that is kind of a good indicator for the type of animation. The only weird thing i've noticed is split text will break the site when used in the latter way, but I'm trying to figure that out. If anyone has repos or examples of how they've achieved something similar, that would also be helpful.