Animating Grid layouts with CSS and Svelte

21 February 2024

Animating a Grid layout using CSS

Transitions: CSS transitions allow you to change property values smoothly over a given duration. This can be used to animate grid layouts by transitioning properties like grid-template-columns, grid-template-rows, and grid-gap.

<div class="app">
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

  .layout-wrapper {
    display: grid;
    grid-template-columns: 0fr 3fr;
    grid-template-rows: 60px 1fr 60px;
    transition: all 0.5s ease;

    .header {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }

    .main {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    .aside {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    .footer {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
    }

    &.animate {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 0 1fr 0;
    }
  }

Main

Aside

Animations: CSS animations are created by gradually changing from one set of CSS styles to another. With @keyframes, you can create complex animations by specifying styles at various stages of the animation timeline.

Transforms: CSS transforms allow elements styled as a grid to be transformed in two-dimensional or three-dimensional space. This can be used to create interesting animation effects.

Animating a Grid layout using Svelte

Transition directive: Svelte’s transition directive can be used to animate the insertion, removal, and updates of elements in a grid layout. It provides several built-in functions like fade, slide, fly, etc., and also allows you to define custom transitions.

main

aside

Animation directive: Svelte’s animate directive can be used to animate elements between states. This is particularly useful for animating grid layouts as elements move from one grid cell to another. An element that uses the animate directive must be the immediate child of a keyed each block.

CSS Svelte