Code32

Yeah, it is frustrating when that happens. Oddly enough though, I did only really experience this issue on one project. Websites I’ve built since seem to be alright. You’re right, it may be an issue with the setup, or possible the versions of gsap/Nuxt I was hosting on that project. The site isn’t yet live so I’ll revisit it and compare and see what’s causing the problem on that one before I launch it.

Hey Cassie! I did put one together back when I raised this issue, but annoyingly it wasn't replicating the issue so I scrapped it.

I didn't find a solid solution, only the unsuitable timeout unfortunately (I only did this for debugging purposes). I'll try the above solution and see if that has an impact.

Exactly yeah, the hardcoded timeout is definitely not a good idea, it's just what I added to get around the issue while in development. I'm still trying to work on a solid solution. The mounted hook is where the refresh should go as that occurs when the component is ready, but it seems it doesn't do the refresh without that timeout. I'll keep looking for the answer but thanks for your response. I haven't got a CodePen setup for it but if I continue to fail at finding the solution, I'll spend some time putting one together.

Hey, thanks for the reply. I have managed to solve using ScrollTrigger.refresh(), however I've only been able to get it working when used on the actual page templates in the beforeRouteEnter and beforeRouteUpdate hooks (inside of a setTimeout which I'd rather avoid, but anything less than a timeout of 600 doesn't work). Is there a reason it won't work inside the component files themselves?

Hey, I'm having an issue whereby adding a ScrollTrigger with animations into a component is causing issues when navigating to different pages using the same component. The ScrollTrigger works fine when refreshing each page, but when you come from a previous page the trigger points are all way off as they haven't recalculated. Interestingly, when navigating to a new page and then resizing the window, it seems to rebuild and loads the ScrollTrigger in correctly. Does anybody know how to get this working correctly? I've tried previously suggested solutions such as killing the ScrollTrigger instance but nothing has yet worked successfully. My code in the component is below: data() { return { animation: null, st: null, }; }, mounted() { this.animation = gsap.timeline(); this.st = ScrollTrigger.create({ id: `featured-${ this.blok._uid }`, trigger: `#featured-${ this.blok._uid }`, markers: true, start: 'top 75%', end: 'bottom bottom', pin: false, scrub: 2, animation: this.animation }); this.st.refresh(); this.st.enable(); this.animation.from( this.$refs.heading, .8, { autoAlpha: 0, y: 100, }, '-=.6' ); this.animation.from( this.$refs.title, .8, { autoAlpha: 0, y: 100, }, '-=.6' ); this.animation.from( this.$refs.content, .8, { autoAlpha: 0, y: 100, }, '-=.6' ); this.animation.from( this.$refs.buttons, .8, { autoAlpha: 0, y: 100, }, '-=.6' ); this.animation.from( this.$refs.additional, .8, { autoAlpha: 0, y: 100, }, '-=.6' ); }, beforeDestroy() { this.st.kill(); },

nuxt.config.js script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js' }, { src: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js' }, ], plugins: [ { src: '~plugins/gsap.js', ssr: false }, ], plugins/gsap.js gsap.registerPlugin(ScrollTrigger); Then in my components: this.intersected = !this.lazy; gsap.to(this.$el, { scrollTrigger: { trigger: this.$el, start: 'top bottom+=500px', onEnter: ({progress, direction, isActive}) => this.intersected = true, }, }); In all modern browsers, this works perfectly but in Internet Explorer, all I get is scrolltrigger is undefined and it breaks the rest of the site. Does anybody know what may be causing this?

Hey, thanks for the response. Yeah both ways, but only once when it enters. I don't want the animations playing again if they re-enter. I'll take another look at the docs.

When setting once: true, on the scroll trigger animation and loading a page while scrolled down to the bottom, the animations don’t run when scrolling upwards. I expected once to work either way but only once, not just when scrolling downwards. Can somebody help explain whether there’s another way of doing this or if it’s a bug? thanks, mike