Animate responsive layout

[DADE]

Hey guys,
Here’s the deal:

I need to code [this layout](http://i.imgur.com/LHPr6nH.gif “Layout”)

And the problem is, how can I make blocks slide when browser window is resized?

p.s: sorry I wrote pretty fast, got to go to work now, I’ll write a bit detailed when I’ll arrive.

[Kitty Giraudel]

I have a 403 forbidden on your link.

Anyway, I think what you are looking for is: `CSS transitions`. I may be wrong though, hard to have an idea without the code.

However please remember that no one is a frigging obsessive resizing his browser window like a mad man.

[DADE]

Image link fixed.

Codepen: http://codepen.io/justdade/pen/hDzAv

I’m still not sure how to make blocks “fly” under the big block instead just jumping there.

[DADE]

So yeah, the only thing I found is http://masonry.desandro.com/ I guess I’ll use it.

[CrocoDillon]

Why would you care? Like Hugo said probably no one will even notice. I don’t think it will be possible (with just html/css), sure masonry will work but is the overhead worth it?

[DADE]

I don’t care, but my boss care xD “I want” is his best argument.

[Paulie_D]

Other than the JS options, the only other way is with positioning and transition of the position values.

It will be ugly….

[Alen]

http://suprb.com/apps/nested/

[Paulie_D]

That’s pretty!

[theacefes]

Agreed but performance sucks after a few resizes.

[Author]

Posts