I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

List view and grid view both can be seen as a group of decision-making elements such as image, title, reviews, location, etc. Those views you'll probably find on the e-shops, some product pages or blog archives and the difference lies in the layout and the combination of those elements. Lists present multiple line items vertically as a single continuous element. On the other side, grid view consists of a repeated pattern of cells arrayed vertically and horizontally within the grid.

COIDEA - Creative View Mode Switch Animation

On the Internet, you can find different solutions to solving this problem. It is often the focus of just calculating the positions correctly, then somehow switching the view and after that to sort the items so that each one in both layouts gets the desired position without undue gaps. I understand, of course, that in the end, it is most important that this function (when changing between grid and list views) works without errors and bugs, but I always have to ask why this function must almost always be so boring?

For that reason, I wanted to give you finally a creative animated solution for the view mode switch. I moved away from the solutions offered by developers and I tried to find inspiration at the place where you can find great designers and animators and find some of their interesting ideas for solving this problem. Of course, my first station on this road was dribbble and I found kreativa (link at the bottom of the page in the resources section) solution. I thought: "an excellent solution, it would be interesting to give it life!", and here we are.

This article should give you a solid base and strong introduction to manipulating your page layouts with CSS3, jQuery, Masonry and GSAP's TweenMax. For end users, it's pretty simple and all animations happen when they click on the "GRID" or "LIST" icons. For the developer, it is a bit more complicated, but I will try to describe what happens in a few words. When loading the page I find every first, second and third item in a grid and give each of them an appropriate class. Then I create two functions: listLayout and gridLayout. One of these two functions will be invoked each time you click on one of the icons. Each of the functions contains a master TweenMax timeline and three additional child TweenMax timelines for each first, second, and third item in the grid. When one of the functions is called, I add child timelines to the master timeline as well as additional animations for item content and play it. I do not think there's a need to say more than that. As soon as you look at the code, it will be clear to you how this example works.

Of course, you can freely download the code, expand it and change it as you like and do something awesome. I hope you enjoy!

References and Credits