<html>
<head>
<style>
.transform {
color:red;
}
</style>
</head>
<body>
<div id='page'>
<div class="about">5454</div>
<div class="about">54545</div>
<div class="about">454545</div>
</div>
<script>
var flag = document.getElementById('page');
var animEl = document.getElementsByClassName('about');
function scr(){
var elHeigth = flag.getBoundingClientRect().top - window.innerHeight;
if(elHeigth <= 0 && Math.abs(elHeigth) <= window.innerHeight) {
for (i = 0; i < animEl.length; i++){
animEl[i].classList.add('transform');
}
}
else{
for (i = 0; i < animEl.length; i++){
animEl[i].classList.remove('transform');
}
}
}
window.addEventListener("scroll" , scr);
</script>
</body>
</html>
Я запутался и переписал заново все, так вроде все ок