I need your help. I did some research about this topic and all what i get is CSS scaling and transitions plus Javascript animation on hover or click. That’s not what I looking for!
I am trying to find a solution to this:
I want a specific button in the header to animate the nav menu. When you resize the page/browser I want the button to suck the nav menu into it and animate to the center of the header to make the site responsive. Got the idea?
I just want help with the term, what exactly am I looking for?
It all depends on what level of complexity you are looking for.
If you want something simple then you could use a media query at your breakpoint to animate the header towards the button and appear to disappear and then once that has happened animate the button to the middle of the page.
That can be done with basic css transitions and animations/keyframes and setting the timings accordingly.
If on the other hand you were looking for something that morphs into the button with some fancy ‘swish effect’ then that would be a custom coding job and not a simple task.
As a example I just converted (hacked) a recent codepen of mine to have some animation on the menu.
It needs a lot of work as the page wasn’t really designed for this but gives an idea of what can be done without JS. You need to open the page wider and then slowly close to see the effect.
As I said the page wasn’t built for this and is therefore a little overly complex and indeed a little js class toggle for the menu would simplify things greatly rather than using target.
