one question, i've seen some websites that as you are scrolling down the page and some elements shows up, these elements starts to modify it's properties like size and position. And as you scroll up again these elements returns to their original size and position.
Is there any way to modify css properties when the element shows up on the screen ?
This youtube tutorial may help you out.
This project will give you the code you need.
Below, an example.
.animation1 {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
.animation2 {
width: 100px;
height: 100px;
background-color: red;
}
.space{
height:150vh;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<div class="animation1"></div>
<div class="space"></div>
<div class="animation2" data-aos="fade-up"
data-aos-anchor-placement="center-bottom"
data-aos-duration="2000">
</div>
<script>
AOS.init();
</script>