Chapter 11. Stagger Effects, Tweening HSL, and SplitText for Text Animation

Staggered Animations

The stagger feature in a lot of JavaScript animation libraries tends to be an incredibly useful tool for creating elegant animations, which is definitely a benefit over using a CSS workflow to create the same effect. Let’s take a look at a few different ways to write the staggering animation illustrated in Figure 11-1.

Figure 11-1. Comparing writing the same staggering animation in CSS, Sass, and GSAP

To create a stagger effect in CSS, you increment the delay using the element or pseudoelement with the same keyframes:

@keyframes staggerFoo {
  to {
    background: orange;
    transform: rotate(90deg);
 }
}

.css .bar:nth-child(1) { animation: staggerFoo 1s 0.1s ease-out both; }
.css .bar:nth-child(2) { animation: staggerFoo 1s 0.2s ease-out both; }
.css .bar:nth-child(3) { animation: staggerFoo 1s 0.3s ease-out both; }
.css .bar:nth-child(4) { animation: staggerFoo 1s 0.4s ease-out both; }
.css .bar:nth-child(5) { animation: staggerFoo 1s 0.5s ease-out both; }
.css .bar:nth-child(6) { animation: staggerFoo 1s 0.5s ease-out both; }

In Sass, you could DRY it out a little:

@keyframes staggerFoo {
  to {
    background: orange;
    transform: rotate(90deg);
 }
}

@for $i from 1 through 6 {
  .sass .bar:nth-child(#{$i} ) {
      animation: staggerFoo 1s ($i * 0.1s) ease-out both;
   }
 }

However, with GSAP, you can create ...

Get SVG Animations now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.