kylestephberry

I figured out the issue and feel dumb that it was not GSAP related. Someone on my team added "100vh" to the Main component causing issues with the animation. Removing "height: 100vh;" from App.vue worked for me.

Also it appears that two scroll bars are showing up the first one will scroll to the bottom, then the second will scroll past the footer then do the animation.

I have an extremely weird issue going on and have not been able to find a solution. As you can see from my codepen which is identical to my current gsap/vuejs project, the functionality I need is working, but only on the codepen. The animation seems to run in my application, but will only start when I hit the bottom of the page, and it's like gsap adds a new blank viewport after the footer just to run the animation? Any Ideas? I'm really at a loss. Component Folder Structure Hero -- HeroArch.vue -- HeroCollage.vue -- HeroHeader.vue -- HeroFooter.vue -- HeroUsedBy.vue -- index.vue Component I'm having issue with - HeroArch.vue <script> import { onMounted, ref } from 'vue'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { gsap } from 'gsap'; import { archPhoto } from '../../data/home'; export default { setup() { const archRef = ref(null); const photoUrl = archPhoto; onMounted(() => { gsap.registerPlugin(ScrollTrigger); function intro() { const tl = gsap.timeline(); tl.fromTo(archRef.value, { y: 200 }, { y: 0, duration: 1 }); console.log('Intro tl', tl); return tl; } function stopTrigger() { const tl = gsap.timeline({ scrollTrigger: { trigger: archRef.value, start: 'top top', end: '+=1000', pin: true, scrub: true, markers: true, }, }); return tl; } const master = gsap.timeline(); master.add(intro()); master.add(stopTrigger()); }); return { photoUrl, archRef, }; }, }; </script> <template> <div class="arch" ref="archRef"> <div class="arch__image" :style="{ backgroundImage: `url(${photoUrl})` }" /> </div> </template> <style lang="postcss" scoped> .arch { position: absolute; width: 364px; height: 650px; top: 0; left: 50%; transform: translateX(-50%); @apply rounded-tl-full rounded-tr-full; overflow: hidden; } .arch__image { background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } </style>