A keyframe combo trick

I want a page load animation that seamlessly combines with a scroll driven animation. I went through multiple versions to find the solution; but you dear reader, you don't have to suffer that.

Here's the desired result, a slow scale up animation on page load that a scroll driven animation can seamlessly modify during scroll:

Try the solution:

The Problem #

1. Page load animation = a time based animation (TBA).
2. Scroll animation = a scroll driven animation (SDA).

These compete to progress an animation AND in this case to modify the same scale property. They compete unless…

The Solution #

The element has both keyframe animations assigned, but one is listed first and the TBA only specifies the from keyframes.

h1 {
  animation: spin linear both, enter 5s ease;
}

Next, we change only one of the keyframe animations to SDA:

h1 {
  animation: spin linear both, enter 5s ease;
  animation-timeline: scroll(), auto; 👈
}

The SDA is listed first for a lesser composite order than the TBA. Then animation-timeline follows this order and specifies the first set of keyframes should be driven by scroll() and the other auto.

Woh right?

With that in place, here's trick #2:
The TBA should only specify where it should animate from, while the SDA should only specify where to.

@keyframes enter {
  from {
    scale: 0.01;
  }
}

@keyframes spin {
  to {
    scale: 0.01;
  }
}

Now, the slow playing scale-in page load TBA can run while the SDA can blend with it on scroll.

Victory.