Looking for a better way
hey guys!!
in the following codepen,
https://codepen.io/-bloop-/pen/RweNZaN
i made a simple hamburger icon animation, it's not anything much fancy, but i feel like how I did it is too complicated or excessive all tho it works perfectly fine, and that's why I'm here, can anyone show me how this same result can be achieved in a better way ? tnx ❤️
4 Replies
Just looking at it real quick, I can think of a couple of improvements.
You could move the styles you set in
navOpen/navClose and put those in CSS instead. I'd suggest toggling an additional class on .navIcon, and putting the new rules on a selector like .navIcon.open .topBar
You can move the transition: 100ms; rule from your individual bars to the .navIcon div selector cause they're all the same.
I really like the effect, it's quite fancyi tried using the toggle , u can see in the animation, first the top and bottom bar Marges together and then the middle on rotates 90deg
when i do with toggle, the first part works normal, but when navCloses, what happens is, unlike the animation where, the middle one rotates back to 0 and then the top and bottom bar goes back to their position, using toggle, the top and bottom bar actually animates first and THEN the middle one
hope u understand what m saying, i can show u screen record of that if u want me to..just lemme know xD
there's a transition delay property in CSS, can't look up details now but you can set it on an element to create the delay you're using setTimeout for now
here
https://codepen.io/-bloop-/pen/RwewpEV
i used the delay method.. check how the closing animation happens
that's what I was talking about xD