Could really use some assistance with this code that has been giving me trouble for quite a while now.
It's a simple HTML, CSS, and JS code involving two pages.
[The second page overlaps the first by default, but adjusting the z-index of the first page will make it appear on top of the second without affecting functionality.]
NOW THE ISSUE:
The code is set up so that:
Clicking on the body (or document) of the second page moves the first page to the left (-100vw) where it then sits on top of the second page at 0vw with z-index:1
While clicking on the body (or document) of the first page shifts the second page to the right (100vw) and sit on top of the first page at 0vw with z-index:1
(Keyframes are used in CSS)
When viewing the effect in the browser, you'll notice a "jumpy" effect during the animation from one page to another.
At some points, the transition seems smooth, and at others, it becomes jumpy which can be quite annoying.
I'm seeking help to eliminate the "jumpy" effect in the code and ensure smooth page transitions as intended.
Here are the code files (JS,CSS,HTML).
var pg_one = document.getElementById("pg_one");
var pg_two = document.getElementById("pg_two");
pg_one.onclick=()=>{
pg_two.className = "pg_two";
pg_one.className = "";
}
pg_two.onclick=()=>{
pg_one.className = "pg_one";
pg_two.className = "";
}*,
*::after,
*::before{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
overflow: hidden;
}
section#pg_one{
display: grid;
align-items: center;
justify-items: center;
width: 100%;
height: 100%;
position: absolute;
background-color: #5944f0;
/* z-index: 1; */
}
.pg_one{
animation-name: p1off;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p1off {
0%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
50%{
-webkit-transform: translateX(-100vw);
-ms-transform: translateX(-100vw);
transform: translateX(-100vw);
}
100%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 1;
}
}
section#pg_two{
position: absolute;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
background-color: #d0277f;
}
.pg_two{
animation-name: p2off;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p2off {
0%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
50%{
-webkit-transform: translateX(100vw);
-ms-transform: translateX(100vw);
transform: translateX(100vw);
}
100%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 1;
}
}<body>
<section id="pg_one">
<span>
<label for="txt">Enter name here: </label><input type="text" id="txt"/>
</span>
</section>
<section id="pg_two">
<span>
<label for="pwd">Choose password: </label><input type="password" name="" id="pwd"/>
</span>
</section>
</body>