The Trexwrapper is a container for the trex image and trex name. I did this so I could move it together. My idea was to scroll down and make the Trexwrapper appear in my screen. The function works. But when I scrolled down it immediately resets the positioning I applied with that animation keyframe. I want this position to stay.
let TRex = document.querySelector("#TRex-Wrapper");
window.addEventListener("scroll", function(e) {
if (window.pageYOffset > 500) {
TRex.classList.add("TrexMove");
}
if (window.pageYOffset < 200) {
TRex.classList.remove("TrexMove");
}
});#TRex-Wrapper {
width: 660px;
height: 350px;
position: absolute;
transform: translateX(750px); /*Initial Position of the Treximage + Trexname*/
}
.TrexMove {
animation: TrexAppearance 1s;
}
@keyframes TrexAppearance {
0% {}
100% {
transform: translateX(0); /*The new position i gave the trexwrapper (Trex + trexname) which immediatly resets right after the animation played out*/
}
}<div id="TRex-Wrapper">
<img src="https://via.placeholder.com/100" alt="Tyrannosaurus Rex" id="TyrannosaurusRex">
<p id="T-rexP">Tyrannosaurus Rex</p>
</div>