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

Today we’d like to share a simple implementation of a grid animation with items, that randomly disappeared.

COIDEA - Expanding Grid with Random Animation

When a grid item is clicked, all thumbnails randomly scale down and detail view comes to the fullscreen position. We are using tweenmax.js to accomplish this effect.

HTML Structure

The HTML structure is ideally prepared for dynamic data. All data we collect from a database can be placed in data attributes and voilà. It's all ready for the magic.

<!-- COIDEA:demo:grid START -->
<div class="coidea-grid">

  <!-- COIDEA:demo:grid:item START -->
  <figure 
    class="coidea-item" 
    data-headline="Our Custom Headline!" 
    data-excerpt="Our Custom Excerpt" 
    data-href="Our Custom Link" 
    data-image="path/to/our/custom/image.jpg">
    <div class="coidea-item-inner"></div> <!-- coidea-item content holder -->
  </figure>
  <!-- COIDEA:demo:grid:item END -->
  ...

</div>
<!-- COIDEA:demo:grid END -->

<!-- COIDEA:demo:item-detail START -->
<div class="coidea-activated-item">
  <div class="coidea-background"></div>
  <div class="coidea-close">
    <span> <!-- close: text, icon oder image --> </span>
  </div>
  <div class="coidea-content">
    <h4></h4>
    <p></p>
    <a href="#">discover more</a>
  </div>
</div>
<!-- COIDEA:demo:item-detail END -->

References and Credits