Jump to content


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

Moderator Tag
Go to solution Solved by kylestephberry,

Recommended Posts

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

-- HeroArch.vue

-- HeroCollage.vue

-- HeroHeader.vue

-- HeroFooter.vue

-- HeroUsedBy.vue

-- index.vue


Component I'm having issue with - HeroArch.vue

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(() => {

      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();

    return {
  <div class="arch" ref="archRef">
    <div class="arch__image" :style="{ backgroundImage: `url(${photoUrl})` }" />
<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;


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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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. 

  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.