A First Have a look at Scroll-Triggered Animations

/* Outline animations */
@keyframes intensify {
  to {
    scale: preliminary;
    background: currentColor;
  }
}

@keyframes rotate-left {
  to {
    rotate: -5deg;
  }
}

@keyframes rotate-right {
  to {
    rotate: 5deg;
  }
}

.sq. {
  /* Set beginning worth */
  scale: 70%;
}

After that it’s extra of the identical, and whereas it’s clearly a extra advanced instance, having the ability to merge values into shorthand properties and decouple them into longhand properties, in addition to the decoupled nature of the completely different mechanics, facilitates flexibility but in addition reusability (on this case, to stagger numerous animations utilizing the identical animation set off settings):

.sq. {
  /* Set beginning worth */
  scale: 70%;

  /* Outline animation title */
  --base-animation: intensify;

  /* Declare animation */
  animation: var(--base-animation) 300ms forwards;

  /* Outline animation set off settings */
  --animation-trigger: --trigger play-forwards play-backwards;

  /* Declare for intensify, then for one in every of both rotate animations */
  animation-trigger: var(--animation-trigger), var(--animation-trigger);

  /* Declare animation set off situations (with out timeline ranges) */
  timeline-trigger: --trigger view();

  /* Declare energetic vary finish */
  timeline-trigger-active-range-end: regular;

  /* Append different animations */
  &.rotate-left {
    animation-name: var(--base-animation), rotate-left;
  }

  &.rotate-right {
    animation-name: var(--base-animation), rotate-right;
  }

  /* Stagger activation ranges */
  &:first-child {
    timeline-trigger-activation-range-start: entry 33.3333%;
  }

  &:nth-child(2) {
    timeline-trigger-activation-range-start: entry 66.6666%;
  }

  &:last-child {
    timeline-trigger-activation-range-start: entry 99.9999%;
  }
}

Right here’s a cleaner, extra strong model that makes use of sibling-count() and sibling-index() (which lack Firefox assist) to stagger the animations:

On this model, as a substitute of setting timeline-trigger-activation-range-start on every particular person sq., we merely goal .sq. and calculate the entry values on the fly:

/* Most entry ÷ variety of squares */
--stagger-interval: calc(100% / sibling-count());

/* Present sq.’s index × stagger interval */
--entry: calc(sibling-index() * var(--stagger-interval));

/* Declare animation set off situations */
timeline-trigger: --trigger view() entry var(--entry) exit 0%;

Making one factor set off different components

On this case, we’ll shift the set off and its ranges to the primary sq., and have the opposite squares observe in keeping with a staggered animation delay. As you possibly can see, all animations are triggered by animation-trigger as soon as 50% of the primary sq. has entered (entry 50%) the viewport (view()). animation-trigger is triggered by timeline-trigger as a result of the dashed ident (the aptly named --trigger) hyperlinks them:

/* Outline animations */
@keyframes intensify {
  to {
    scale: preliminary;
    background: currentColor;
  }
}

@keyframes rotate-left {
  to {
    rotate: -5deg;
  }
}

@keyframes rotate-right {
  to {
    rotate: 5deg;
  }
}

.sq. {
  /* Set beginning worth */
  scale: 70%;

  /* Outline animation title */
  --base-animation: intensify;

  /* Most delay ÷ variety of squares */
  --stagger-interval: calc(300ms / sibling-count());

  /* Present sq.’s index × stagger interval */
  --animation-delay: calc(sibling-index() * var(--stagger-interval));

  /* Declare animation */
  animation: var(--base-animation) 300ms var(--animation-delay) forwards;

  /* Outline animation set off settings */
  --animation-trigger: --trigger play-forwards play-backwards;

  /* Declare for intensify, then for one in every of both rotate animations */
  animation-trigger: var(--animation-trigger), var(--animation-trigger);

  &:first-child {
    /* Declare animation set off situations */
    timeline-trigger: --trigger view() entry 50%;

    /* Declare energetic vary finish */
    timeline-trigger-active-range-end: regular;
  }

  /* Append different animations */
  &.rotate-left {
    animation-name: var(--base-animation), rotate-left;
  }

  &.rotate-right {
    animation-name: var(--base-animation), rotate-right;
  }
}

One draw back is that when animation-trigger is in play-backwards mode, the animations don’t stagger. It's because, I feel, when the animation is reversed, the delay is included in that. This looks as if an oversight to me, particularly as that isn’t the case with animation-direction: reverse, however I may very well be fully improper on this.

Understanding timeline ranges

Timeline ranges are a giant a part of scroll-triggered animations, however they’re a separate mechanic. For scroll-pushed animations, you’ll need animation-range and its longhand properties. With scroll-triggered animations, the syntax is basically the identical however makes use of completely different properties and two completely different ranges. The activation vary determines the scroll zone wherein the animation triggers, whereas the energetic vary determines the zone wherein it holds up (even when not within the activation vary anymore).

Timeline ranges are a bit heavy. Nevertheless, view() entry 100% exit 0% (when totally seen) and view() comprise (the identical but in addition if bigger than the viewport) will suffice more often than not.

However when you’re eager to dive in, animation-range, though it’s for scroll-pushed animations, is lighter and affords a novice-level understanding of timeline ranges. After that, I like to recommend studying the Animation Triggers spec to cowl the numerous intricacies of timeline ranges inside the context of those scroll-triggered animations.

One other ingredient of scroll-triggered animations that’s additionally its personal factor is the view() perform, however this one’s simpler to summarize right here. Mainly, on the subject of scroll-triggered animations, view() is the viewport. So when you had a 5rem sticky header, view(y 0 5rem) would make the timeline vary issue that in alongside the y-axis.

Closing ideas

Scroll-triggered animations might be difficult as a result of they’re just like scroll-driven animations, they leverage older CSS options (primarily animation) in addition to mechanics from different newer options (dashed idents, view(), timeline ranges), along with the CSS properties which might be particular to scroll-triggered animations. There’s an entire lot occurring without delay.

I’m undecided how I really feel about them, to be sincere. They’re positively cool, enjoyable, and helpful, however they’re additionally difficult, and it’ll be some time earlier than I actually begin to rave about them.