Sir, the modification that you are suggesting I already tried that I have re-modified the code and uploaded it on the live server, but still it didnt show that smooth animation appearing as if coming from left.
when sir hamburger is clicked, the elements that comes after that click: newsletter form, for example etc, should come animated. currently they are coming as if they are shoting by appearing immediately.
You don’t have position:sticky on the mobile menu. You have position:fixed on the sidebar but you don’t slide that. I’m not sure why you are duplicating the sidebar content anyway when you could just show and hide the sidebar as required?
As far as co-ordinates on a stick element then they don’t move the element at all but indicate a position where it becomes sticky inside a scrollable container. The co-ordinates will do nothing if scrolling hasn’t caused those co-ordinates to be active. there’s no point trying to animate the co-ordinates.
Indeed for all animation you should avoid using top.left,right and bottom with position and use transforms instead as they are much smoother and less intensive for the browser because they don’t cause reflow and are hardware accelerated.
Also if you want to animate the panel when you hide it then you will need to use another method instead of display:none. Display:none happens instantly so you can’t animate anything.
You could instead hide it with a transform left of -100vw which would ensure it was hidden off screen but you would need to make it position:absolute so it takes up no space.
Agree. Design is bogus. I created this HTML 1.5 years back since then the skills and code organization have improved. I tried to minimize redundancy today, and then a bit succeded.
As you said position absolute is essential else it will create a gap, currently, I have applied position: absolute, but it is creating a poor experience only search input comes in animating, excluding all other things.
Issue: I think position absolute is creating a small vertical scroll bar.
It’s a magic number because it only works if the header above it is less than 80px. If you were to change the size of the header then that 80px is not longer working. You want to avoid the use of magic numbers where possible so that they are automatic and not rely on something else to be the size you thought it was.
As there is only an image above your menu then its probably not an issue but generally I would avoid doing this and redesign to an automatic system even if it means changing the design a bit.
Yes the Keyframe will run when refreshed. I don’t think you actually need a keyframe animation here anyway and a transition should suffice.
e.g.Here’s a broken down version of your menu just to test the principal.
If you can still see the transition on refresh then another method is to wrap a div around the mobile menu and push that off to the side without animation. Then you can use the clicked class to remove that rule and let the original animation take place.
However I think the transition method should work unless you have a very quick page where it may be noticeable on load.
Actually the transition method above will work because if you refresh the page the media query has already moved the element to the side so in fact there is no transition to be made. It never was anywhere else. When you click it then it is moved and the transition will occur in both directions. No keyframes needed at all.
The menu will transition slide to the side when you resize the desktop browser from larger to smaller but I see that as a good thing as it tells you where something has gone rather than it vanishing instantly like a magic trick.
My doubt is since we have put this part(transition: transform 1s ease;) in .hide class how is the animation working here: transition: transform 1s ease; (This is in .hide class)
Part 3 is ok when we click it again the clicked calss is eleimiated and this comes into picture →
