Div Element Not Pinning Top Of Page (Vuejs Weird Functionality)

[kylestephberry 1 Likes (Newbie)]

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>

 

See the Pen VwWqMyG by KyleBerry (@KyleBerry) on CodePen

[kylestephberry 1 Likes (Newbie)]

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.

[kylestephberry 1 Likes (Newbie)]

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. 

[GreenSock 18,876 Likes (Superhero)]

Thanks for letting us know. Glad you got it figured out, @kylestephberry 👍