Dynamic Grid with Transitions

A dynamic grid layout that let’s you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.

You have surely seen the latest cool visualization of Google Trends, where the latest hot searches from Google Trends are shown in a colorful grid and where you can control the amount of items with a little grid control in the top left corner.

Regardless of the great swipe effect in the grid boxes, we really loved the idea of changing a layout dynamically with a control. Another great thing is that the boxes’ dimensions are percentage-based which makes them fluid. We couldn’t help but wonder how it would look if we’d added transitions to the grid where we could actually see what’s happening when changing from a let’s say 5 × 5 layout to a 2 × 3 one.

GoogleTrendsGrid

So we tried to create something similar: a dynamic grid layout where we can choose to have transitions with or without delays. The transition itself is set in the JavaScript, but in the CSS we can define what happens to the items that disappear (for example, scale down or rotate, etc.).

Please note that this only works as intended in browsers that support the respective CSS properties.

DynamicGridAnimationSmall

What we are doing is to calculate the positions and the dimensions of the boxes and set them according to the chosen grid layout. The values are percentage-based which makes the boxes fluid. Once we change the grid layout, a special class will be applied to the items that need to be hidden (i.e. the once we won’t see in the viewport anymore) which will optionally trigger a transition and do what you define in the class to be done (for example, scale them down or rotate them) and hide them.

For eventual rounding errors we are using calc() to add one pixel to the calculated percentage. Although that might not be the perfectly correct value, it will avoid the appearance of gaps between the items. For browsers that don’t support calc(),* [W]e’ll be adding half a percent to the width and height to avoid any gaps. *Woah, Safari does not seem to like transitioning to a calc() value at all: https://bugs.webkit.org/show_bug.cgi?id=100568. That does not seem to be resolved. So now we are using the fallback for every browser.

Note that Modernizr is used for detecting the support for calc() and touch. We are also using classie.js by David De Sandro.

An example for how to initialize the grid is the following:

Grid.init( {
	transition : true,
	speed : 450,
	delay: 20
} );

Demos

Check out the demos with the different configurations:

We hope you like and enjoy it and find it useful!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 30

Comments are closed.
  1. First download link is giving 404 error..plz correct..
    awesome code..thanks

  2. ugh this is so cool! I’ve got the perfect site to use it on. Thanks for sharing this but as an intermediate web developer, I wish there was a full tutorial for some of codrops’ stuff 🙁

  3. Safari 6.0.5 keeps crashing when I try the transition demo, but the basic dynamic grid demo (#1) works well.

  4. Hey guys, thanks for the feedback! Safari does not seem to like transitioning to a calc width/height; check what I wrote about that in the post. We’ve fixed it now and it should work in Safari without crashing. Let me know if you can confirm that, thanks, ML

  5. Really cool… but when we reduce the size of the grid, some elements would get lost… It would be amazing if we could have them on scroll 😀 or pagination :)… Cheers 😀

    • I second this. I can’t really think of a practical use case if information is going to disappear… but on the other hand, if the grid got reflowed vertically, it would be amazing for photo galleries or dashboards.

    • Thanks for your feedback Kiran and Sacha! This really does require some special use case and is not a suitable choice for every type of content. Maybe this could be useful: the size of the whole grid really depends on the parent which is currently set to a 100% width and height (with overflow hidden). But the grid could be any size and the page could as well be scrollable by just editing the styles of gt-grid. So maybe this opens up some more possibilities.

      If we would only have something like “element queries” (and maybe a parent selector) we’d have so many more and easier ways to make something like this super-responsive 🙂

      Thanks again and cheers, ML

  6. Ok now I’m bit scary about how awesome is this project.

    Impressive!

    • That’s exactly what I was thinking! How do you imagine these stuff? ‘Cuz they’re great!

  7. Hi Marylou, It works fine in Safari now. You can continue to amaze me with your demo’s. You rock!

  8. Amazing work here!

    I’m currently tearing it apart for a specific project. Looking for a quick way to change to a specific grid size by binding the click event to another div/a on the page (eg. Clicking a menu item triggers the transition to 5×5), without having to rewrite any of your brilliant js.

    Thanks!

  9. Mary as usual your demos are incredible and inspirational.
    Please keep making the source freely available for those that can “dig” and “tinker”