In order to activate the animation of the skill-bars when the element is displayed on the website, I am seeking a solution where scrolling down through the section triggers the animation. Although I have managed to conceptualize and implement the idea with the assistance of codepen, there is a persistent issue that eludes my understanding. Essentially, I added a js file to initiate the animation upon viewing the element and incorporated the animate property in my CSS file for assigning the class whenever the element becomes visible. However, since multiple animations are present in the CSS file due to almost every class having an associated animation, it raises the question of how to consolidate all the element's animations under a single class called animate.
Code:
document.addEventListener("DOMContentLoaded", function(event) {
// get the element to animate
var element = document.getElementById('box');
// listen for scroll event and call animate function
document.addEventListener('scroll', animate);
// check if element is in view
function inView() {
var windowHeight = window.innerHeight;
var scrollY = window.scrollY || window.pageYOffset;
var scrollPosition = scrollY + windowHeight;
var elementPosition = element.getBoundingClientRect().top + scrollY;
if (scrollPosition > elementPosition) {
return true;
}
return false;
}
function animate() {
if (inView()) {
element.classList.add('animate');
}
}
});@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20{
height: 100%;
place-items: center;
background: transparent;
}
::selection{
color: #fff;
background: black;
}
.skill-bars{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
...
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18>Harvard CS50 Course</span18>
</div>
<div class="progress-line html">
<span18></span18>
</div>
</div>
...
</div>
</div>
</div>
</section>