#products div{
    scale: .8 ;opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range:entry 100px;

}

#indexScroll div{
    scale: .8 ;opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range:entry;
}

#headerImage{
    opacity: 0.8;
    animation:header-image-animation linear forwards;
    animation-timeline: view();
    animation-range:exit;

}

@keyframes header-image-animation{
    20%{
        opacity: 1;
    }
     
    80%,100%{opacity: 0; scale: 3;}

}

@keyframes fade-in{
     
    to{scale: 1; opacity: 1;}
}