SVG Animations

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 ...