Wherever you look on the internet, you'll find responsive design - and that's a good thing. After all, who wants to zoom in on static websites? Exactly, nobody.
Whether you use a framework or write the media queries yourself, there are several elements on the page that move, or change sizes, depending on how big the browser window is.
To achieve this, web designers typically use media queries to tell the content on the page what they are dealing with, at what resolution and where. Normally, these elements jump to their new position, which is ok. However, with a little splash of animation, it looks even better.
The whole thing is done quite easily, with css.
Since we want to have the effect on the whole page, we use the * css selector and paste the following snippet into our custom.scss file:
* { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; }
Have fun trying it!