Animation: Rotate In on Open and Rotate Out Reverse on Close: asking for Feedback
I made this animation, and everything works I as want,
but turns it's move complicated then I assumed and it took way more code than I expected. Therefore I just wonder is there a better way to do the same, more efficiently?
Please, let me know if you know!
Codepen:
https://codepen.io/JunSu-Ho/pen/JjwBLwK
9 Replies
It simplified it for you. Im only changing 1 state in js (the thing is open or closed) and based on that the css works. Also there's no need for keyframe animations, it can be done with a simple transition, from
scale(0) to scale(1) rotate(720deg). (Works both ways)
i also changed the button from flex to grid so it's easier to stack the 2 icons on top of each other (same grid area)
https://codepen.io/MarkBoots/pen/NWeBMbmI've found another problem how do I make that the icon scales (1.1) a bit when hover, only the one that it's visible (active) at the moment
that destroys my animation 😓 ðŸ˜
yea that's a bit tricky, but with custom props it is possible. I've updated the pen.
But, you can not change the timing, it will be the same for the scaling on hover as the rotate on click
If you want 2 different timings, well need to add a container around around the icons so we can handle that separately.
If I understand this correctly, as you are using
transform: scale for your main animation you could use the "scale" property, scale: 1.1, for the hover. This way it could have it's own timing.i didn't try that, but i think it will override the transform property
ohw, you're right
no, whilst they both scale, they are independent.
i thought under the hood, the still were connected somehow
update the pen again
the same goes for "translate" and "rotate" - whilst they do the same thing as "transform: translate" and "transform: rotate" they are in fact completely separate properties.
yea, i know those are separate available now
very helpful in this case 😉