0

I wanted to make a simple parallax effect using ScrollTrigger. The problem is the absolute div containing the "images" (currently red boxes) have a greater height than the page itself. So there is a big gap after the footer since the images have moved with ScrollTrigger. Is there anyway to prevent this big gap?

Here's a JSFiddle. To see the problem in action the width of the preview window needs to be at least 1050px.

HTML

<body class="test">
    
<section class="hero">
    <div class="wrapper">
        <h1>ScrollTrigger</h1>
    </div>
</section>

<section class="main">
    <div class="wrapper">
            <div class="innerContainer">
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, ipsum at efficitur pellentesque, turpis ante rhoncus leo, quis dignissim felis ante.</h2>
            </div>
            <div id="parallax" class="imgContainer">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div>
            <!-- Uncomment to see the "ghost" of the red boxes -->
            <!-- <div class="imgContainer">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div> -->
    </div>
</section> 

<footer>
    <div class="wrapper">
        <h2>Footer</h2>
    </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<script src="index.js"></script>
</body>

SCSS

* {
    padding: 0;
    margin: 0;
    font-family: monospace;
}

.wrapper {
    position: relative;
    max-width: 1600px;
    margin: auto;
    padding: 20px;
}

body {
    .hero {
        height: 600px;
    }

    h1 {
        font-size: 120px;
    }

    h2 {
        font-size: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    &.home {
        .hero {
            background-color: aqua;
            position: absolute;
            height: 3000px;
        }

        p {
            width: 40%;
            font-size: 20px;
        }
    }

    &.test {
        .hero {
            background-color: rgb(255, 136, 0);
        }

        section {
            h2 {
                font-size: 180px;
            }
        }
    }
}

header {
    width: 100%;
    background-color: white;
    filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
}

footer {
    width: 100%;
    background-color: rgb(225, 225, 225);
    filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
}


.innerContainer {
    position: relative;
    z-index: 2;
}

.imgContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .img {
        background-color: yellow;
        width: 500px;
        height: 700px;
        margin-top: 200px;
        position: relative;

        &:first-of-type {
            margin-top: 0;
        }

        &:nth-child(2n+1) {
            margin-left: 50%;
        }
    }

    &:not(#parallax) {
        .img {
            background-color: transparent;
            border: 1px solid red;
        }
    }
}

JS

gsap.set("#parallax", {
    y: 0
});

gsap.to('#parallax', {
    scrollTrigger: {
        trigger: '#parallax',
        toggleActions: "restart pause reverse pause",
        markers: true,
        start: 'top center',
        end: 'bottom bottom',
        scrub: 0.5
    },
    y: -2200,
    duration: 0.5
});
Xavier Godbout
  • 33
  • 7

1 Answers1

1

This is because of the markers. The markers are added to the DOM where they need to go, which lengthens the page if the marker is at or after the bottom of the page.

You can remove markers: true or to prevent this from happening.

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147