0

On the homepage of my website I'm using the animate-on-scroll library to reveal different parts of the page while scrolling down. I want the parent div to initially just have the height of the first child div (.intro). When scrolling down, the height of the box expands to fit the entire height of the content.

It partially works right now using dynamic class binding in Vue.js, which changes the height to 100% after scrolling. But I can only get the initial height right when I set it to an absolute value, which is not what I want.

<div class="home-box" :class="{ fullView: isScrolled}">
    <div class="intro">
        Only this content is displayed at first
    </div>
    <div class="about"
                data-aos="fade-up" 
                data-aos-anchor-placement="top-center"
                data-aos-once="true">
        Then this gets revealed
    </div>
    <div class="work"
                data-aos="flip-up">
        Finally this div is revealed
    </div>
</div>

.home-box {
    width: 60%;
    margin: 3rem auto;
    height: 30rem;
}

.fullView {
    height: 100%;
}

I've tried to set the initial height to different percentages (everything from 1 to 99%), but that doesn't do anything. Using height: 70vh is the closest I've gotten to a solution, but this still causes problems on different screen sizes.

Using display: none on the other child divs (.about and .work) would fix my height problem, but I need all hidden content to stay on the page to trigger different methods and animations, so I can't use this.

I would really love a more responsive solution that could match the parent height to just the first child div's height. Is there any way to do this using just CSS? Or otherwise with Vue.js or Javascript?

ecj
  • 1

0 Answers0