How do I remove the "jumpy" effect

Question

1.00/5 (1 vote)

See more:

NOW THE PROBLEM:

I designed the code such that:

when I click on the body (or document) of the second page, the first page moves to the left (-100vw) and then sits on the second page (0vw, z-index:1)
when I click on the body (or document) of the first page, the second page moves to the right (100vw) and then sits on the first page (0vw, z-index:1)

(I used keyframes in CSS).

When you view the effect in your browser you'll notice that at some point while animating from one page to the other, there will be a "jumpy" effect.
At a point, the animation flows smoothly, then, at another point, it gives this "jumpy" effect
(and that's really annoying)

Please, someone, help me fix this code by removing the "jumpy" effect to give the desired transition.
Below are the HTML,CSS,JS files.

HTML

<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>

CSS

*,
*::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;
    }
}

JavaScript

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 = "";
}

What I have tried:

I have tried manipulating the z-index in the CSS keyframes.

Posted 26-Oct-21 13:01pm

User 15371251

Updated 26-Oct-21 23:50pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-10-26T23:50:00

Solution 1

You need to change how your animation works:

CSS

section {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

#pg_one {
    --hidden-left: -100vw;
    background-color: #5944f0;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

#pg_two {
    --hidden-left: 100vw;
    background-color: #d0277f;
    -webkit-transform: translateX(var(--hidden-left));
    -ms-transform: translateX(var(--hidden-left));
    transform: translateX(var(--hidden-left));
}

@keyframes hide {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(var(--hidden-left));
        -ms-transform: translateX(var(--hidden-left));
        transform: translateX(var(--hidden-left));
    }
}

@keyframes show {
    0% {
        -webkit-transform: translateX(var(--hidden-left));
        -ms-transform: translateX(var(--hidden-left));
        transform: translateX(var(--hidden-left));
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.hide {
    animation-name: hide;
}

.show {
    animation-name: show;
}

JavaScript

const pg_one = document.getElementById("pg_one");
const pg_two = document.getElementById("pg_two");

pg_one.addEventListener("click", () => {
    pg_one.classList.remove("show");
    pg_one.classList.add("hide");
    pg_two.classList.remove("hide");
    pg_two.classList.add("show");
});

pg_two.addEventListener("click", () => {
    pg_two.classList.remove("show");
    pg_two.classList.add("hide");
    pg_one.classList.remove("hide");
    pg_one.classList.add("show");
});

Demo[^]

Posted 26-Oct-21 23:50pm

Richard Deeming

Comments

[no name] 27-Oct-21 13:52pm

First of all, thank you Richard Deeming for your answer.
I actually wanted it to be just as the animation in the initial stage works.
Hope you understand

[no name] 27-Oct-21 16:10pm

The answer from Richard Deeming is NOT what I'm looking for...

Richard Deeming 28-Oct-21 3:41am

Firstly, have a little patience. Your first reply was posted at 7PM in my time-zone.

Secondly, you're going to need to explain precisely what you want. Your question says you want to "fix" the animation, but you've rejected the "fixed" version saying you want it to work exactly like the version in your question. But if the version in your question is exactly how you want it to work, then there's nothing to "fix"!

[no name] 28-Oct-21 5:18am

Notice I said: "I actually wanted it to be just as the animation in the initial stage works"

Thank you very much for helping me out with this bug (and for replying, that meant a lot!)

Actually, what I meant by fixing the animation was this:
The page "on which you click" should cause the other page to slide in to sit on top.
Click on red, blue slides in (from the left) to sit on top;
Click on blue, red slides in (from the right) to sit on top.

The page "on which you click" SHOULD NOT MOVE when the other guy comes in to SIT RIGHT ON TOP.
Get the idea? (Forgive me for not clarifying this a lot earlier.)

Richard Deeming 28-Oct-21 5:23am

So something like this?
Demo[^]

Changes:

@keyframes hide {
    0% {
        ...
        z-index: 0;
    }
    99% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        z-index: 0;
    }
    100% {
        ...
        z-index: 0;
    }
}

@keyframes show {
    0% {
        ...
        z-index: 1;
    }
    100% {
        ...
        z-index: 1;
    }
}

[no name] 28-Oct-21 5:27am

Thank you sir. Um, could you just write the code in full so I could see its execution?
I may not perfectly know how to fit that in...

Richard Deeming 28-Oct-21 5:28am

Click on the "demo" link[^] and you'll see the full code along with the result.

[no name] 28-Oct-21 5:42am

Seems you're from another planet.
(That simply means you're a genius!)

There's one more thing though...
When you run this code in your browser, try clicking the "tab" button on your keyboard - you'll notice that it gets "jumpy" again because it is trying to move to the next page (a feature I don't want to happen).
Hope you understand?

Clicking or pressing "Tab" button on a form element page traverses through every input element!
And I do not want pressing TAB to interfere. Only the "click event" is allowed.

Richard Deeming 28-Oct-21 5:50am

Maybe something like this: Demo[^]

Adding tabIndex="-1" to both inputs prevents them from being reachable via "sequential focus navigation" (tabbing).
tabindex - HTML: HyperText Markup Language | MDN[^]

I've also added a check in the Javascript event handlers so that the page doesn't switch if you click the label or input.

pg_one.addEventListener("click", (e) => {
    if (e.target !== e.currentTarget) { return; }

Event.target - Web APIs | MDN[^]

[no name] 28-Oct-21 6:25am

Hmm... Tried it on a browser, doesn't work. Stil jumpy.

Richard Deeming 28-Oct-21 8:01am

Works fine for me in Firefox 93.

[no name] 28-Oct-21 13:56pm

Have you tried it on chrome?

[no name] 28-Oct-21 13:57pm

I tried pressing the Tab key and it still gives that annoying result.

[no name] 28-Oct-21 14:00pm

Hmm... Not working on chrome either.

Richard Deeming 29-Oct-21 4:13am

Edit fiddle - JSFiddle - Code Playground[^]

Works fine in Chrome 95.

[no name] 28-Oct-21 14:01pm

Not working on Firefox

Richard Deeming 29-Oct-21 4:13am

Edit fiddle - JSFiddle - Code Playground[^]

Works fine in Firefox 93.

[no name] 28-Oct-21 14:03pm

I guess this bug has no solution...

[no name] 28-Oct-21 15:00pm

When you keep pressing the TAB key, it keeps traversing through the inputs in the HTML page.
I deliberately incorporated input elements to know how to prevent that unwanted effect of one page "jumping" to another.
(So now you see, I didn't just place the inputs there for nothing.)

Richard Deeming 29-Oct-21 4:11am

Seriously? Six comments saying basically the same thing, all posted late in the evening in my time zone?

Which part of "have a little patience" did you not understand?!

[no name] 29-Oct-21 18:23pm

Sorry, just a little desperate.
Run it (natively) on your browser and keep pressing the Tab key.
Please don't use JS Fiddle.
Just try it on a normal browser page.

Richard Deeming 1-Nov-21 5:02am

Works fine for me in a normal page in both Firefox and Chrome.

[no name] 29-Oct-21 18:32pm

YOU JOINED CODEPROJECT IN 2002.
ARE YOU EVEN HUMAN?
Does everyone in your family write code or what?

Richard Deeming 1-Nov-21 5:02am

People over 30 are perfectly capable of writing code, you know! 🤣

[no name] 30-Oct-21 18:37pm

I think I figured it out (the reason you can't spot the bug).
Try being on the blue page (or you could simply set the z-index to one), then keep pressing the TAB key. You'll see what I'm talking about.

If you're starting to feel bored helping out, it's okay, I understand.
Thank You.

Richard Deeming 1-Nov-21 5:03am

Changing the z-index makes no difference - the Tab key still doesn't cause the page to scroll.

[no name] 2-Nov-21 21:17pm

Eureka!
The code works!!!
(My bad, I guess I kinda copied and pasted the code from JS Fiddle 'wrongly').
Thank you very much (and deeply sorry for the stress I've put you through - people like you are scarce on earth these days).

Merci Beaucoup!

[no name] 28-Oct-21 6:26am

Tab button really annoying