I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file.
The JavaScript code:
<script>
import anime from 'animejs';
anime({
targets: 'container.decor1.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true
});
</script>
The HTML elements intended for animation:
<div class = "container">
<div class = "decor1">
<p class = "HLF">
HLF
</p>
</div>
</div>
Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!
Complete code snippet provided below:
<!DOCTYPE html>
<html>
<head>
<script>
import anime from 'animejs';
anime({
targets: 'container.decor1.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true
});
</script>
</head>
<style>
.tweets {grid-area: tweets; background: rgb(240, 240, 240, 0.5); padding: 40px;
margin: 15px; font-family: arial}
.quotes {grid-area: quotes; background: turquoise; padding: 20px;
margin: 15px; font-family: helvetica; color: white; font-size: 20px}
.decor1 {grid-area: decor1; background: rgb(50, 50, 50, 0.5); padding: 5px;
margin: 15px; font-family: helvetica; text-align: center}
.HLF { color: white; font-size: 200px; margin:1px}
.distributor { color: white; font-size: 20px; margin:1px}
.visual {grid-area: visual; background: rgb(0, 50, 200, 0.6); padding: 20px;
margin: 10px; font-family: helvetica; font-size: 20px;
border: none; border-radius: 10px; color: white}
.product {grid-area: product; background: rgb(35, 35, 35, 0.7); padding: 20px;
margin: 10px; font-family: helvetica; font-size: 20px; border: none;
border-radius: 10px; color: white}
.container {
display: grid;
grid-template-areas:
'tweets quotes decor1'
'tweets visual product';
background-color: rgb(0, 100, 0, 0.8);
padding: 100px;
}
.quote-1,
.quote-2,
.quote-3 {
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.quote-1{
animation-name: quote-1;
}
.quote-2{
animation-name: quote-2;
}
.quote-3{
animation-name: quote-3;
}
</style>
<body style = "background: white">
<div class = "container">
<div class = "tweets">
<center>
<a class="twitter-timeline" data-width="250" data-height="350" data-dnt="true" data-theme="dark" href="https://twitter.com/Herbalife24?ref_src=twsrc%5Etfw">Tweets by Herbalife24</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</center>
</div>
<div class = "quotes">
<p class = "quote-1">
"Our bodies consist of 65% water."
</p>
<p class = "quote-2">
"Our bodies consist of 65% water."
</p>
<p class = "quote-3">
"Our bodies consist of 65% water."
</p>
</div>
<div class = "decor1">
<p class = "HLF">
HLF
</p>
<p class = "distributor">
Independent Distributor
</p>
</div>
<button class = "visual" onclick = "alert('Under Development')"> Visualization </button>
<button class = "product"> Product </button>
</div>
</body>
</html>