Added a small animation for the clock and the menu bar exit button. #40
Conversation
kerogs
commented
Oct 7, 2024
kerogs
commented
- The clock hands will be animated when the time is loaded.
- The menu bar exit button has a slightly smoother animation than before.
- The clock hands will be animated when the time is loaded. - The menu bar exit button has a slightly smoother animation than before.
|
@XengShi You can merge this pull to your repository. It works fine. It adds an animation to the clock and when we exit the menu bar. |
|
Screencast from 2024-10-10 20-52-54.webm
|
- Corrected the rotation of the second dot to prevent it from rotating in the opposite direction after completing its cycle. - Added top margin to the close button and adjusted its styling to ensure it is a perfect circle.
|
|
The conflicts have been resolved |
|
@XengShi Can you kindly check this and merge it to the repo. Please. |
Thank you. |
|
@kerogs Clock has still some weird animations issues |
|
Looks like it happens when keeping the tab open for too long and using other tab. when going back to the home tab something happens. |
|
I just tried with different browsers, it happens on browsers like chrome or edge from what I see. I'm on Firefox and I don't have any problems. So the problem does indeed stem from what @itz-rj-here said. To ensure that the animation is smooth and that the hands don't move backwards, I had to add up the degrees. The problem is that browsers like chrome and edge stop the tab and reload it directly where it's supposed to be. This makes the animation play. If you return to the tab after a while, it will add the number of degrees from where it should be. And since the JS code adds the degrees, it will play an animation (with css) because it will go from 180 degrees to 400 degrees, for example. But I don't know how to make browsers like google and edge not play the CSS animation when you come back to the tab and put the css animation back once the page has added the number of degrees correctly... |
|
I did some research and the way I found is this: You need to add code to script.js that will disable the animation for 100 ms after returning to a tab, temporarily disabling the animation so that the browser doesn't rotate the hands too quickly. window.addEventListener("focus", function() {
document.querySelector(".clock").classList.add("stop");
setTimeout(function() {
document.querySelector(".clock").classList.remove("stop");
}, 100);
});and add a class in style.css that will disable the animation. I've tried it on chrome and edge and it works. .clock.stop #hour,
.clock.stop #minute,
.clock.stop #second {
transition: unset !important;
} |
|
I have classes to attend. Talk to @Minuga-RC about it. I think he had managed to fix the clock but still. |
I had the same problem so what I did is if the rotation is 0deg i will turn off animations and manually set the rotation to 360deg and it seems to work until #75 happened |
