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>