When I add an animation class triggered by a scroll event listener, the progress bar animation only runs once on page load and does not run again when I scroll. Is there an issue with the code or is setState being used incorrectly?
.body2 {
background-color: #151515;
height: 700px;
}
.title2 {
font-size: 40px;
font-family: handwritten;
color: #d10100;
text-align: center;
padding-top: 100px;
grid-area: 1 / 1 / 2 / 2;
letter-spacing: 5px;
font-stretch: extra-condensed;
}
.titleback2 {
font-size: 90px;
font-family: ARCHIVO-bold;
-webkit-text-stroke-color: #212121;
-webkit-text-stroke-width: 3px;
color: #151515;
text-align: center;
padding-top: 75px;
grid-area: 1 / 1 / 2 / 2;
}
.bar{
background-color: #e3e3e3;
width: 400px;
height: 20px;
}
.bargrid {
margin: 200px;
height: 500px;
display: grid;
grid-template: 1fr 1fr 1fr/ 1fr 1fr;
justify-items: center;
}
.barlabel {
color: #e3e3e3;
font-family: cafe;
padding-bottom: 10px;
}
.progress{
background-color: #d10100;
background-image: linear-gradient(to right, #d10100 30%,#ff3231, #ff5f5e);
height: 20px;
position: relative;
bottom: 20px;
padding-left: 2px;
padding-right: 2px;
}
.loadpage {
animation: progressbar 2s normal;
}
@keyframes progressbar{
0% {width: 0%}
100% {width: 100%}
}import React from "react";
import './Skills.css';
class Skills extends React.Component {
constructor(props){
super(props);
this.state = {
progress: 'progress',
}
this.changeState = this.changeState.bind(this)
}
changeState = () => {
this.setState({
progress: 'progress loadpage'
})
}
componentDidMount(){
window.addEventListener('scroll', this.changeState)
this.setState({
progress: 'progress'
})
}
render() {
return (
<div className="body2">
<div className="container">
<div className="titleback2">SKILLS</div>
<div className="title2">skills</div>
</div>
<div className="bargrid">
<div className="cell1">
<div className="barlabel">HTML</div>
<div className="bar" />
<div className={this.state.progress} />
</div>
<div className="cell2">
<div className="barlabel">CSS</div>
<div className="bar" />
<div className={this.state.progress} />
</div>
<div className="cell3">
<div className="barlabel">JAVASCRIPT</div>
<div className="bar" />
<div className={this.state.progress} />
</div>
<div className="cell4">
<div className="barlabel">REACT.JS</div>
<div className="bar" />
<div className={this.state.progress} />
</div>
<div className="cell5">
<div className="barlabel">FRAMER MOTION</div>
<div className="bar" />
<div className={this.state.progress} />
</div>
<div className="cell6">
<div className="barlabel">HTML</div>
<div className="bar" />
<div className={this.state.progress} />
</div>
</div>
</div>
);
}
}
export default Skills;