I'm trying to create a link that, when clicked, will trigger a CSS animation to start or change its state from pause to play. Here is my current approach:
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './main_page.css'
function Main() {
var bg = document.getElementsByClassName('app');
return (
<div>
<h1>
Welcome to the main page!
</h1>
<h2>
Please note that this website is still in development. Stay tuned for updates!
</h2>
<p>
In the meantime, feel free to explore my project here! <br></br>
<Link to={'/projects/scatter_gather'} onClick={() => {
bg.animationPlayState = 'running';
}}>
Visit "Scatter-Gather"
</Link>
</p>
</div>
);
}
export default Main;
The CSS code for the .App class looks like this:
.App {
background-image: linear-gradient(45deg, rgba(255,179,105,0.5) 0%, rgba(245,255,122,0.5) 20%, rgba(121,252,255,0.5) 40%, rgba(83,92,255,0.5) 60%, rgba(255,118,234,0.5) 80%, rgba(255,131,131,0.5) 100%);
background-size: 400%;
animation: background_animation 12s infinite;
animation-play-state: paused;
animation-direction: alternate;
color: rgb(68, 68, 68);
}
@keyframes background_animation {
0% {
background-position: 0%;
}
20% {
background-position: 20%;
}
40% {
background-position: 40%;
}
60% {
background-position: 60%;
}
80% {
background-position: 80%;
}
100% {
background-position: 100%;
}
}
However, I am facing an issue where clicking on the link does not seem to change the property as intended. Could it be a syntax error? Any help would be greatly appreciated!